小程序模板網(wǎng)

小程序——帶參返回上一頁(yè)幾種方法

發(fā)布時(shí)間:2018-06-22 10:46 所屬欄目:小程序開(kāi)發(fā)教程

小程序的頁(yè)面跳轉(zhuǎn)API像wx.navigateTo()、wx.redirectTo()之類的,都是跳轉(zhuǎn)到一個(gè)全新的頁(yè)面,當(dāng)這個(gè)頁(yè)面是表單的時(shí)候,有時(shí)候需要跳轉(zhuǎn)到其它頁(yè)面選取信息后再跳轉(zhuǎn)回來(lái),那之前填的信息就必須得存在,這個(gè)時(shí)候可以當(dāng)跳轉(zhuǎn)到選擇信息的頁(yè)面,選中信息后設(shè)置設(shè)置上一頁(yè)的data,然后再返回到上一頁(yè),這樣數(shù)據(jù)都會(huì)存在。

方法一 
把當(dāng)前頁(yè)面數(shù)據(jù)放入本地緩存( wx.setStorage(wx.setStorageSync),上一個(gè)頁(yè)面再?gòu)木彺嬷腥〕觯╳x.getStorage(wx.getStorageSync))同時(shí)退出登錄時(shí)要清除緩存(wx.clearStorage(wx.clearStorageSync))。

方法二

 

				
  1.  
  2. 在當(dāng)前頁(yè)設(shè)置上一頁(yè)的data,例如
  3. var pages = getCurrentPages(); // 獲取頁(yè)面棧
  4. var currPage = pages[pages.length - 1]; // 當(dāng)前頁(yè)面
  5. var prevPage = pages[pages.length - 2]; // 上一個(gè)頁(yè)面
  6. prevPage.setData({
  7. mydata: {a:1, b:2} // 假數(shù)據(jù)
  8. })

當(dāng)然這個(gè)“mydata”必須是上一頁(yè)有的數(shù)據(jù)才行

返回上一頁(yè)的數(shù)據(jù)為:

 

				
  1.  
  2. wx.navigateBack({
  3. delta: 1
  4. })

2、直接調(diào)用方法名來(lái)更新數(shù)據(jù)  頁(yè)面A

 

				
  1. Page({
  2. data: {
  3. name: ''
  4. },
  5. ...
  6. ,
  7. //更新name
  8. changeData: function(name){
  9. this.setData({
  10. name: name
  11. })
  12. }
  13. })

頁(yè)面B,假設(shè)有一個(gè)文本框用于輸入姓名,點(diǎn)擊返回按鈕后更新頁(yè)面A的name

 

				
  1. Page({
  2. //此方法用于文本框輸入回調(diào)
  3. inputTyping: function (e) {
  4. //獲取頁(yè)面棧
  5. var pages = getCurrentPages();
  6. if(pages.length > 1){
  7. //上一個(gè)頁(yè)面實(shí)例對(duì)象
  8. var prePage = pages[pages.length - 2];
  9. //關(guān)鍵在這里
  10. prePage.changeData(e.detail.value)
  11. }
  12. }
  13. })

這樣就可以實(shí)現(xiàn)數(shù)據(jù)傳遞給上一個(gè)頁(yè)面,要注意頁(yè)面A必須使用wx.navigateTo跳轉(zhuǎn)到頁(yè)面B,不能使用wx.redirectTo,這樣會(huì)關(guān)閉上一個(gè)頁(yè)面,導(dǎo)致頁(yè)面B無(wú)法獲取上一頁(yè)P(yáng)age實(shí)例。

方法三  在app.js中設(shè)置全局變量,當(dāng)前頁(yè)賦值,上一頁(yè)取之

方法為

 

				
  1. globalData: {
  2. userInfo: null,
  3. }

注意:方法一,方法三,都需要重新刷新頁(yè)面數(shù)據(jù)所走方法為:

 

				
  1. /**
  2. * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
  3. */
  4. onShow: function () {
  5.  
  6. },


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://www.u-renovate.com/wxmini/doc/course/24584.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢
AI智能客服 ×