微信小程序頁面間傳值有很多種方法,目前我這個初學(xué)者所了解的方法大概有以下四種,第一種就是頁面跳轉(zhuǎn),依靠跳轉(zhuǎn)的url帶參傳值,第二種就是本地存取,這里有分為同步或者異步,以及移除或清除本地緩存的API接口,還有一種就是將值設(shè)置為全局變量,在需要的頁面獲取,這種的話就不是很建議使用,因為很多需要傳遞的值是你需要從后臺拿數(shù)據(jù)的。
接下來。我將按照我的理解詳細(xì)的介紹一下這四種方法。
第一種,就是帶參傳值,比如說你在A頁面,需要跳轉(zhuǎn)到B頁面并向B頁面?zhèn)鬟f信息
首先我們直接采用<navigator></navigator>組件,這個組件的屬性可以自己了解一下,open-type為跳轉(zhuǎn)方式,默認(rèn)為navigator,當(dāng)然有redirect,switchTab,reLaunch,navigitorBack,exit(退出小程序,target="miniProgram"時生效),相當(dāng)于頁面導(dǎo)航的那幾個API。自己了解一下好的噢!
好滴好滴,我們繼續(xù)來說頁面?zhèn)髦?/p>
(1)在A頁面有一個固定的值要傳遞到B頁面,比如說一個固定的值user_id要傳遞給B
<!--pages/pageA/pageA.wxml-->
<navigator url="../pageB/pageB?user_id='12345678'" hover-class="navigator-hover">跳轉(zhuǎn)到B頁面</navigator>
?后面為你要傳遞的值
這樣在B頁面js的onload函數(shù)里面,使用setData方法可以獲取到傳遞過來的值,并將它賦值給B頁面初始數(shù)據(jù)
在B頁面的data里面聲明一個初始數(shù)據(jù)
data: {
user_id:''
},
然后在onload函數(shù)中進(jìn)行操作,頁面加載時獲取
onLoad: function (options) {
this.setData({
user_id:options.user_id
})
console.log(this.data.user_id)
},
(2)這樣頁面間傳一個值得方法就學(xué)會了,傳多個值得方法同理,只不過需要用&鏈接起來
舉一個栗子
A頁面
<!--pages/pageA/pageA.wxml-->
<navigator url="../pageB/pageB?user_id='12345678'" hover-class="navigator-hover">跳轉(zhuǎn)到B頁面</navigator>
B頁面
data: {
user_id:'',
user_name:'',
user_age:''
},
onLoad: function (options) {
this.setData({
user_id:options.user_id,
user_name: options.user_name,
user_age: options.user_age
})
console.log(this.data.user_id)
console.log(this.data.user_name)
console.log(this.data.user_age)
},
(3)這種有固定值的傳值,emmm,我覺得很沒有必要,既然都知道值了,直接在B頁面的初始數(shù)據(jù)中使用不就行了,所以上面全都很廢,這里我說一下從后臺獲取參數(shù)傳遞
栗子
在A頁面發(fā)送wx.request()請求后端數(shù)據(jù)響應(yīng),將響應(yīng)得到的數(shù)據(jù)選擇需要的參數(shù)傳遞給B頁面,例如我們需要傳遞user_id以及user_name
首先,在A頁面的聲明初始數(shù)據(jù)
data: {
user_id:'',
user_name:''
},
在點擊跳轉(zhuǎn)的函數(shù)下發(fā)送wx.request()請求,并獲取數(shù)據(jù),在請求成功后進(jìn)行頁面跳轉(zhuǎn)并傳遞參數(shù)
bindTap: function () {
var that = this;
wx.request({
url: 'test/test',//開發(fā)者服務(wù)器接口地址
data:{
........................
},//服務(wù)器響應(yīng)的請求參數(shù)
header: {
'content-type': 'application/json' // 默認(rèn)值,根據(jù)服務(wù)器給出的請求頭進(jìn)行調(diào)整
},
success: function (res) {//請求成功調(diào)用函數(shù)
console.log(res.data)
//在這里,可以將請求到的數(shù)據(jù)賦值給原始數(shù)據(jù),我只是舉一個栗子,具體如何賦值,跟后臺返回參數(shù)的形式有關(guān)
that.setData({
used_id:res.data.user_id,
used_name:res.data.user_name
})
//ok,接下來進(jìn)行頁面跳轉(zhuǎn),要將這些值傳遞到B頁面
wx.navigateTo({
url: '../pageB/pageB?used_id=' + that.data.used_id + '&used_name=' + that.data.used_name,
})
}
})
},
這里可能有點疑問,就是為什么要用'+'進(jìn)行拼接,哈哈哈,因為你現(xiàn)在傳遞的參數(shù)只是實際參數(shù)的名字,如果你直接和前面?zhèn)鲄⒌姆绞揭粯拥脑?,是得不到值的,因為腦子秀逗 吃過虧,所以特此提醒
還有還有,switchTab這種導(dǎo)航方式,不能帶參,也就是說不能通過url進(jìn)行傳參,解決方法就是如果要跳轉(zhuǎn)到tab頁面,使用reLaunch方法,當(dāng)然也可以跳過這個,使用其他的傳值方法,該用switchTab還是要用的,不將就是一種人生態(tài)度,哈哈哈,開玩笑了
第二種頁面間傳值方法,請見下節(jié),麻煩了。。。