〔開發(fā)系列〕一次關(guān)于小程序開發(fā)的深度總結(jié)

Godtoy 發(fā)布于2019-08-02 12:01 / 2101人閱讀

摘要：一路由跳轉(zhuǎn)需求如何獲取當(dāng)前頁面的上一個(gè)頁面場景用于判斷返回哪一個(gè)頁面的時(shí)候使用當(dāng)前頁上一個(gè)頁面封裝返回上一個(gè)頁面的方法封裝返回上一個(gè)頁面的方法判斷上一個(gè)頁面然后返回上一個(gè)頁面發(fā)布頁或者訂單頁上一個(gè)頁面調(diào)用方法如何返回上上個(gè)頁面返回上一

一路由跳轉(zhuǎn)

需求：如何獲取當(dāng)前頁面的上一個(gè)頁面
場景：用于判斷返回哪一個(gè)頁面的時(shí)候使用

const pages = getCurrentPages();
const Page = pages[pages.length - 1];//當(dāng)前頁
const prevPage = pages[pages.length - 2];  //上一個(gè)頁面

1. 封裝返回上一個(gè)頁面的方法

// 封裝返回上一個(gè)頁面的方法：
export function navigateBackByPage() {
    // 判斷上一個(gè)頁面 然后返回上一個(gè)頁面： 發(fā)布頁或者訂單頁
    const pages = getCurrentPages();
    const prevPage = pages[pages.length - 2];  //上一個(gè)頁面
    if (prevPage) {
        wx.navigateBack();
    }
}
// 調(diào)用方法
navigateBackByPage();

2. 如何返回上上個(gè)頁面

wx.navigateBack({
 delta: 2
})

3. 返回上一頁的時(shí)候把當(dāng)前頁的數(shù)據(jù)傳遞會上一個(gè)頁面

const pages = getCurrentPages();
const prevPage = pages[pages.length - 2]; //上一個(gè)頁面
// 直接調(diào)用上一個(gè)頁面的setData()方法，把數(shù)據(jù)存到上一個(gè)頁面中去
prevPage.setData({
   orderId: orderId
});
wx.navigateBack();

二列表頁傳遞id獲取詳情頁數(shù)據(jù)

// 01 遍歷列表頁 獲取每一項(xiàng)item的id 綁定到data屬性中

     {{item.title}}
 
// 02 列表頁 通過事件和參數(shù)傳遞id
toOrderDetail(e) {
   const id = e.currentTarget.dataset.id;
   wx.navigateTo({
      url:"order-detail/order-detail?id=" + id
   })
}

// 03 詳情頁 在onload中間中拿到URL傳遞過來的參數(shù)id 請求詳情頁接口 拼接id參數(shù)
onLoad(option) {
    const id = option.id;
    const detailApi = "http://192.168.1.142:8096/app/FindOrder/findOrderById?orderId=" + id
      發(fā)起請求···
}

三動態(tài)設(shè)置頁面頂部導(dǎo)航欄標(biāo)題

說明

01 onload中不能設(shè)置，因?yàn)閛nload過程中頁面并沒有生成，所以不能操作UI，onShow渲染頁面只是一瞬間，也不能展示UI，js中操作UI和設(shè)置展示UI，只能用onReady,onLoad和onShow用來處理數(shù)據(jù)請求，處理業(yè)務(wù)邏輯
02 （重點(diǎn)思路）在onLoad獲取數(shù)據(jù)，傳遞到data；onReady使用data中的數(shù)據(jù)渲染導(dǎo)航

// 01 數(shù)據(jù)初始化
data：{
  navigationTitle：""
}
// 02 在onLoad中獲取列表頁js傳遞過來的參數(shù)：
// 場景一：列表頁傳遞數(shù)據(jù)給詳情頁
// 場景一：直接請求接口獲取數(shù)據(jù)，如果情面有多種狀態(tài)，通過不同狀態(tài)動態(tài)設(shè)置導(dǎo)航
onLoad(option) {
   const title = option.title;
   this.setData({
     navigationTitle:title
   })
}
// 03 需要在onReady生命周期中設(shè)置導(dǎo)航條：
onReady() {
   wx.setNavigationBarTitle({
      title:this.data.navigetionTitle
   })
}

四跨頁全局傳遞數(shù)據(jù)的兩種方法

場景：實(shí)時(shí)數(shù)據(jù)傳遞

通過app.js中的全局變量globalData：{ }，當(dāng)前頁的數(shù)據(jù)賦值給全局變量，另一個(gè)頁面實(shí)時(shí)獲取全局變量的值

// 頁面a 
app.globalData.workTypeId= workTypeId;
// 頁面b
const workTypeId= app.globalData.workTypeId

場景：從持久化數(shù)據(jù)中獲取數(shù)據(jù)

通過緩存來緩存數(shù)據(jù) 在任意頁面獲取

wx.setStorageSync("userInfoLogin", userInfoLogin); // 登陸后緩存用戶userId
// 封裝獲取id的方法
export function getStorageUserId() {
    const userInfoLogin = wx.getStorageSync("userInfoLogin");
    return userInfoLogin.id;
}
// 調(diào)用
const userId getStorageUserId()

持續(xù)更新中···

GPU云服務(wù)器云服務(wù)器免費(fèi)的小程序開發(fā) 小程序開發(fā)的流程簡單的小程序開發(fā) 個(gè)人的小程序開發(fā)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53282.html

發(fā)表評論

登陸后可評論

0條評論

Godtoy

男|高級講師

我要關(guān)注我要私信

TA的文章

Linux驅(qū)動實(shí)踐：你知道【字符設(shè)備驅(qū)動程序】的兩種寫法嗎？

閱讀 2892·2021-11-19 11:35
騰訊云雙11活動 2021 - 云服務(wù)器低至年48元及值得買的云服務(wù)

閱讀 2612·2021-11-02 14:40
【騰訊雲(yún)】DNSPod解析套餐全面升配降價(jià)，更高的套餐配置規(guī)格，更優(yōu)的價(jià)格方案，全面提升可用性及響應(yīng)

閱讀 1436·2021-09-04 16:48
CSS3實(shí)現(xiàn)微信小程序瀑布流布局

閱讀 3051·2019-08-30 15:55
父元素line-height設(shè)為0后，inline-block的空元素終于安分了

閱讀 1800·2019-08-30 13:11
關(guān)于特定位置進(jìn)度條的加載

閱讀 1982·2019-08-29 11:12
細(xì)節(jié)：解析XML文檔和XML字符串

閱讀 1119·2019-08-27 10:52
項(xiàng)目在啟動時(shí)究竟是怎么運(yùn)行的（項(xiàng)目運(yùn)行的步驟）

閱讀 3193·2019-08-26 18:36

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

〔開發(fā)系列〕一次關(guān)于小程序開發(fā)的深度總結(jié)

相關(guān)文章