〔開發系列〕一次關於小程序開發的深度總結

一 路由跳轉

需求：如何獲取當前頁面的上一個頁面
場景：用於判斷返回哪個頁面的時候使用

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

1. 封裝返回上一個頁面的方法

// 封裝返回上一個頁面的方法：
export function navigateBackByPage() {
    // 判斷上一個頁面 而後返回上一個頁面： 發佈頁或者訂單頁
    const pages = getCurrentPages();
    const prevPage = pages[pages.length - 2];  //上一個頁面
    if (prevPage) {
        wx.navigateBack();
    }
}
// 調用方法
navigateBackByPage();

2. 如何返回上上個頁面

wx.navigateBack({
 delta: 2
})

3. 返回上一頁的時候把當前頁的數據傳遞會上一個頁面

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

二 列表頁傳遞id獲取詳情頁數據

// 01 遍歷列表頁 獲取每一項item的id 綁定到data屬性中
<block wx:for={{list}}>
     <view class="scroll-view-item" catchtap="toOrderDetail"
     data-id="{{item.id}}">{{item.title}}</view>
 </block >
// 02 列表頁 經過事件和參數傳遞id
toOrderDetail(e) {
   const id = e.currentTarget.dataset.id;
   wx.navigateTo({
      url:'order-detail/order-detail?id=' + id
   })
}

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

三 動態設置頁面頂部導航欄標題

說明

01 onload中不能設置，由於onload過程當中頁面並無生成，因此不能操做UI，onShow渲染頁面只是一瞬間，也不能展現UI，js中操做UI和設置展現UI，只能用onReady,onLoad和onShow用來處理數據請求，處理業務邏輯
02 （重點思路）在onLoad獲取數據，傳遞到data；onReady使用data中的數據渲染導航

// 01 數據初始化
data：{
  navigationTitle：''
}
// 02 在onLoad中獲取列表頁js傳遞過來的參數：
// 場景一：列表頁傳遞數據給詳情頁
// 場景一：直接請求接口獲取數據，若是情面有多種狀態，經過不一樣狀態動態設置導航
onLoad(option) {
   const title = option.title;
   this.setData({
     navigationTitle:title
   })
}
// 03 須要在onReady生命週期中設置導航條：
onReady() {
   wx.setNavigationBarTitle({
      title:this.data.navigetionTitle
   })
}

四 跨頁全局傳遞數據的兩種方法

場景：實時數據傳遞

1. 經過app.js中的全局變量globalData：{ }，當前頁的數據賦值給全局變量，另外一個頁面實時獲取全局變量的值

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

場景：從持久化數據中獲取數據

1. 經過緩存來緩存數據 在任意頁面獲取

wx.setStorageSync('userInfoLogin', userInfoLogin); // 登錄後緩存用戶userId
// 封裝獲取id的方法
export function getStorageUserId() {
    const userInfoLogin = wx.getStorageSync('userInfoLogin');
    return userInfoLogin.id;
}
// 調用
const userId getStorageUserId()

持續更新中···