微信小程序之頁面間傳值(一)傳參

微信小程序頁面間傳值有很多種方法,目前我這個初學(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é),麻煩了。。。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容