摘要:一路由跳轉(zhuǎn)需求如何獲取當(dāng)前頁面的上一個頁面場景用于判斷返回哪一個頁面的時候使用當(dāng)前頁上一個頁面封裝返回上一個頁面的方法封裝返回上一個頁面的方法判斷上一個頁面然后返回上一個頁面發(fā)布頁或者訂單頁上一個頁面調(diào)用方法如何返回上上個頁面返回上一
一 路由跳轉(zhuǎn)
需求:如何獲取當(dāng)前頁面的上一個頁面
場景:用于判斷返回哪一個頁面的時候使用
const pages = getCurrentPages(); const Page = pages[pages.length - 1];//當(dāng)前頁 const prevPage = pages[pages.length - 2]; //上一個頁面
1. 封裝返回上一個頁面的方法
// 封裝返回上一個頁面的方法:
export function navigateBackByPage() {
// 判斷上一個頁面 然后返回上一個頁面: 發(fā)布頁或者訂單頁
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2]; //上一個頁面
if (prevPage) {
wx.navigateBack();
}
}
// 調(diào)用方法
navigateBackByPage();
2. 如何返回上上個頁面
wx.navigateBack({
delta: 2
})
3. 返回上一頁的時候把當(dāng)前頁的數(shù)據(jù)傳遞會上一個頁面
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2]; //上一個頁面
// 直接調(diào)用上一個頁面的setData()方法,把數(shù)據(jù)存到上一個頁面中去
prevPage.setData({
orderId: orderId
});
wx.navigateBack();
二 列表頁傳遞id獲取詳情頁數(shù)據(jù)
// 01 遍歷列表頁 獲取每一項item的id 綁定到data屬性中三 動態(tài)設(shè)置頁面頂部導(dǎo)航欄標(biāo)題// 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ā)起請求··· } {{item.title}}
說明
01 onload中不能設(shè)置,因為onload過程中頁面并沒有生成,所以不能操作UI,onShow渲染頁面只是一瞬間,也不能展示UI,js中操作UI和設(shè)置展示UI,只能用onReady,onLoad和onShow用來處理數(shù)據(jù)請求,處理業(yè)務(wù)邏輯 02 (重點思路)在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ù)據(jù)傳遞
通過app.js中的全局變量globalData:{ },當(dāng)前頁的數(shù)據(jù)賦值給全局變量,另一個頁面實時獲取全局變量的值
// 頁面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ù)更新中···
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://www.hztianpu.com/yun/114217.html
摘要:一路由跳轉(zhuǎn)需求如何獲取當(dāng)前頁面的上一個頁面場景用于判斷返回哪一個頁面的時候使用當(dāng)前頁上一個頁面封裝返回上一個頁面的方法封裝返回上一個頁面的方法判斷上一個頁面然后返回上一個頁面發(fā)布頁或者訂單頁上一個頁面調(diào)用方法如何返回上上個頁面返回上一 一 路由跳轉(zhuǎn) 需求:如何獲取當(dāng)前頁面的上一個頁面場景:用于判斷返回哪一個頁面的時候使用 const pages = getCurrentPages();...
摘要:微信小程序應(yīng)用號開發(fā)資源匯總文檔工具教程代碼插件組件文檔從搭建一個微信小程序開始小程序開發(fā)文檔小程序設(shè)計指南工具小程序開發(fā)者工具官方支持微信小程序?qū)崟r預(yù)覽的支持的微信小程序組件化開發(fā)框架轉(zhuǎn)在線工具小程序云端增強社區(qū)微信小程序 微信(小程序or應(yīng)用號)開發(fā)資源匯總-文檔-工具-教程-代碼-插件-組件 文檔 從搭建一個微信小程序開始 小程序開發(fā)文檔 小程序設(shè)計指南 工具 小程序開發(fā)者...
摘要:淺談秒殺系統(tǒng)架構(gòu)設(shè)計后端掘金秒殺是電子商務(wù)網(wǎng)站常見的一種營銷手段。這兩個項目白話網(wǎng)站架構(gòu)演進后端掘金這是白話系列的文章。 淺談秒殺系統(tǒng)架構(gòu)設(shè)計 - 后端 - 掘金秒殺是電子商務(wù)網(wǎng)站常見的一種營銷手段。 不要整個系統(tǒng)宕機。 即使系統(tǒng)故障,也不要將錯誤數(shù)據(jù)展示出來。 盡量保持公平公正。 實現(xiàn)效果 秒殺開始前,搶購按鈕為活動未開始。 秒殺開始時,搶購按鈕可以點擊下單。 秒殺結(jié)束后,按鈕按鈕變...
摘要:官方資料微信公眾平臺注冊小程序。官網(wǎng)開發(fā)文檔社區(qū)開發(fā)工具部署微信小程序微信小程序本身不需要部署,在微信開發(fā)工具中直接上傳代碼就行。 為什么 學(xué)習(xí) Java 三年,目前已經(jīng)工作了2年,因為自學(xué),基礎(chǔ)差,所以打算年末總結(jié)一下常見的基礎(chǔ)知識和面試點; 也可以通過獨立做一個項目整合自己工作期間學(xué)習(xí)的知識,加深印象。 但是想著回家或是平時手機用的多,做一款A(yù)PP和小程序很方便查看。 項目展示 本...
閱讀 3620·2021-11-25 09:43
閱讀 2389·2021-09-22 10:02
閱讀 4148·2021-09-06 15:00
閱讀 2585·2019-08-30 15:56
閱讀 2603·2019-08-30 15:54
閱讀 3569·2019-08-30 14:14
閱讀 2547·2019-08-29 17:25
閱讀 3251·2019-08-29 17:16