免费国产欧美国日产_少妇AV一区二区三区无码_蜜桃精品av无码喷奶水小说_jk18禁网站视频_精产国品一二三级产品区别_被夫の上司に犯波多野结衣_78m成人手机免费看_最爽最刺激18禁视频_偷偷色噜狠狠狠狠的777米奇

易優(yōu)GEO 重磅上線 ~ 一站式GEO優(yōu)化工具,讓豆包、文心一言、DeepSeek 在回答中主動推薦你的品牌,搶占AI流量入口!  點擊查看

小程序模板網(wǎng)

微信小程序從子頁面退回父頁面時的數(shù)據(jù)傳遞

發(fā)布時間:2018-04-08 12:01 所屬欄目:小程序開發(fā)教程
本文作者為一斤代碼,來自原文地址;作者是一名從事多年技術(shù)工作的牛人,開始研究微信小程序后,出品了多篇有用文章,我會在相關(guān)文章內(nèi)列出;歡迎閱讀;

我們知道,在微信小程序中,從一個頁面轉(zhuǎn)到另一個頁面,一般情況下可以通過navigate或redirect時候的url來攜帶參數(shù),然后在目標(biāo)頁面的onLoad函數(shù)參數(shù)中獲取這些url參數(shù)。例如:


	
// 源頁面A相關(guān)代碼
wx.navigateTo({
  url: "/pages/mypage/mypage?a=1&b=2"
})

// 目標(biāo)頁面B相關(guān)代碼
Page({
  onLoad: function (options) {
    var a = options.a; // 值:1
    var b = options.b; // 值:2
  }
})

但是,這種方式只有在目標(biāo)頁面還沒有創(chuàng)建的時候,才有效。因為一個頁面的onLoad方法在頁面的生命周期中,只執(zhí)行一次。

我們來考慮一下以下場景:


	
1. 在【頁面A】中調(diào)用wx.navigateTo方法跳轉(zhuǎn)到【頁面B】
2. 然后從【頁面B】返回【頁面A】, 并將【頁面B】中的一些數(shù)據(jù)傳回【頁面A】

舉個更實際點的例子,如下圖所示,我在這個表單頁面A中填寫數(shù)據(jù):

然后這個頁面上,有一個搜索按鈕,點擊該按鈕,將跳轉(zhuǎn)到另一個證券代碼搜索頁面B:

當(dāng)我在這個搜索列表中選中一個證券代碼后,將返回到上一個表單頁面,繼續(xù)我未完成的表單填寫與提交操作。

這種場景是非常合理和常見的。

但是,我們來想一下,怎么在退出頁面B,返回頁面A的時候,把頁面B中選中的證券代碼回傳給頁面A呢?使用navigateTo()中url攜帶參數(shù)的方式?

基于Page生命周期的原因,我們的答案是:不行!

那有什么辦法可以做到呢?

方法1:使用全局?jǐn)?shù)據(jù)存儲
  • 將要傳遞的數(shù)據(jù),存儲在App對象上(比如globalData屬性)。
  • 將要傳遞的數(shù)據(jù),存儲在小程序的本地數(shù)據(jù)緩存(Storage)中。

例如,我們在將要退出頁面B的時候,作如下調(diào)用:


	
//=== 1. 存儲到app對象上的方式 ========
var app = getApp()
app.globalData.mydata = {a:1, b:2};  //存儲數(shù)據(jù)到app對象上
wx.navigateBack();  //返回上一個頁面

//=== 2.存儲到數(shù)據(jù)緩存的方式 =========
wx.setStorage({
  key: "mydata",
  data: {a:1, b:2},
  success: function () {
    wx.navigateBack();   //返回上一個頁面
  }
})

這樣一來,當(dāng)返回到上一個頁面的時候,可以通過讀取這些全局存儲區(qū)域,來獲取到我們需要的數(shù)據(jù)。

不過,這種方式也是有很明顯的缺點的。由于是全局?jǐn)?shù)據(jù)存儲,所以當(dāng)你存入了那些數(shù)據(jù)后,必須謹(jǐn)慎的去管理這些全局?jǐn)?shù)據(jù)(何時被銷毀),否則一不小心,就會產(chǎn)生副作用。

方法2:從頁面路由棧中直接獲取和操作目標(biāo)Page對象

這種方式,是通過調(diào)用小程序的API: getCurrentPages(),來獲取當(dāng)前頁面路由棧的信息,這個路由棧中按照頁面的路由順序存放著相應(yīng)的Page對象,我們可以很容易的獲取到上一級頁面的完整Page對象,從而使直接調(diào)用Page對象的屬性和方法成為可能。

如下所示:


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

//直接調(diào)用上一個頁面的setData()方法,把數(shù)據(jù)存到上一個頁面中去
prevPage.setData({
  mydata: {a:1, b:2}
})

比起全局?jǐn)?shù)據(jù)存儲的方式,這種方式在邏輯上要清晰得多,也不存在對數(shù)據(jù)的銷毀有額外的管理工作。

總之,目前來看,如果你遇上了這樣的場景,我推薦你使用方法2來設(shè)計你的代碼。也希望小程序框架能推出更好更優(yōu)雅的方式,來解決這種數(shù)據(jù)回傳問題。

最后呢,如果你有什么更好的方式,請不吝賜教啦。



本文地址:http://www.szcjxy.com/wxmini/doc/course/23161.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢: 點擊咨詢
在線客服