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

Bryan 發布于2019-08-29 17:16 / 2901人閱讀

摘要：一路由跳轉需求如何獲取當前頁面的上一個頁面場景用于判斷返回哪一個頁面的時候使用當前頁上一個頁面封裝返回上一個頁面的方法封裝返回上一個頁面的方法判斷上一個頁面然后返回上一個頁面發布頁或者訂單頁上一個頁面調用方法如何返回上上個頁面返回上一

一路由跳轉

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

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屬性中

     {{item.title}}
 
// 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
   })
}

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

場景：實時數據傳遞

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

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

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

通過緩存來緩存數據在任意頁面獲取

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

持續更新中···

云服務器 GPU云服務器免費的小程序開發小程序開發的流程簡單的小程序開發個人的小程序開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114217.html

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

摘要：一路由跳轉需求如何獲取當前頁面的上一個頁面場景用于判斷返回哪一個頁面的時候使用當前頁上一個頁面封裝返回上一個頁面的方法封裝返回上一個頁面的方法判斷上一個頁面然后返回上一個頁面發布頁或者訂單頁上一個頁面調用方法如何返回上上個頁面返回上一一路由跳轉需求：如何獲取當前頁面的上一個頁面場景：用于判斷返回哪一個頁面的時候使用 const pages = getCurrentPages();...

Godtoy 2019-08-02 12:01 評論0 收藏0
前端資源系列（3）-微信小程序開發資源匯總

摘要：微信小程序應用號開發資源匯總文檔工具教程代碼插件組件文檔從搭建一個微信小程序開始小程序開發文檔小程序設計指南工具小程序開發者工具官方支持微信小程序實時預覽的支持的微信小程序組件化開發框架轉在線工具小程序云端增強社區微信小程序微信(小程序or應用號)開發資源匯總-文檔-工具-教程-代碼-插件-組件文檔從搭建一個微信小程序開始小程序開發文檔小程序設計指南工具小程序開發者...

paney129 2019-08-20 11:14 評論0 收藏0
架構 - 收藏集 - 掘金

摘要：淺談秒殺系統架構設計后端掘金秒殺是電子商務網站常見的一種營銷手段。這兩個項目白話網站架構演進后端掘金這是白話系列的文章。淺談秒殺系統架構設計 - 后端 - 掘金秒殺是電子商務網站常見的一種營銷手段。不要整個系統宕機。即使系統故障，也不要將錯誤數據展示出來。盡量保持公平公正。實現效果秒殺開始前，搶購按鈕為活動未開始。秒殺開始時，搶購按鈕可以點擊下單。秒殺結束后，按鈕按鈕變...

Riddler 2019-06-24 17:54 評論0 收藏0
Java 初學者做的第一個微信小程序總結--關于Java基礎

摘要：官方資料微信公眾平臺注冊小程序。官網開發文檔社區開發工具部署微信小程序微信小程序本身不需要部署，在微信開發工具中直接上傳代碼就行。為什么學習 Java 三年，目前已經工作了2年，因為自學，基礎差，所以打算年末總結一下常見的基礎知識和面試點；也可以通過獨立做一個項目整合自己工作期間學習的知識，加深印象。但是想著回家或是平時手機用的多，做一款APP和小程序很方便查看。項目展示本...

mudiyouyou 2019-08-16 14:30 評論0 收藏0