天天看點
傳回

頁面傳值的方式 - 小程式篇一、跨頁面傳值二、頁面内傳值三、本地儲存四、全局的app對象

目錄

  • 一、跨頁面傳值
    • 正向傳值 A->B
    • 反向傳值 B->A
  • 二、頁面内傳值
  • 三、本地儲存
  • 四、全局的app對象

一、跨頁面傳值

正向傳值 A->B

1.用

navigator

标簽傳值或

wx.navigator

, 比如

// A頁面傳值
<navigator class="highLight" url="../detail/detail?good_id=18"></navigator>

這裡将

good_id=16

參數傳入detail頁面，然後detail頁面的onload方法内接收。

// B頁面接收
onLoad: function(options){
  this.setData({
  	good_id: options.good_id
  })
}

如果需要傳多個參數，用&連結即可

// A頁面傳值
<navigator class="highLight" url="../detail/detail?good_id=18&good_price=1.88&good_name=hello網際網路人"></navigator>
           
onLoad: function(options){
  this.setData({
  	good_id: options.good_id,
  	good_name: options.good_name,
  	good_price: options.good_price
  })
}

如果需要傳入數組，字典等複雜類型，要先用JSON.stringify()轉成字元串傳遞

let detail = [
{img: '../img1.png?111', title: '濃香', size: "0-0"},{img: '../img2.png?222', title: '醬香', size: "1-0"},{img: '../img3.png?333', title: '原味', size: "2-0"}
]
wx.navigateTo({
  url: '../detail/detail/good_detail=' + JSON.stringify(detail),
  success: function(res){
    // todo sucess
  },
  fail: function(){
    // todo fail
  },
  complete: function(){
    // todo complete
  }
})
注 : 如果轉化的字元串中 有"?"，"&“或”="等這樣的符号，則隻會傳遞符号以前的字元串，符号後面資料會被丢失，這個問題我猜想可能是小程式内部的路由處理 對這些符号敏感吧。是以有時候這裡可以先用 encodeURIComponent() 進行轉碼，在目标頁面再用 decodeURIComponent() 解碼，這樣就可以避免資料丢失了。OK，這是第一種 依靠跳轉的url帶參數傳值

反向傳值 B->A

在B界面需要傳值地方代碼如下

var pages = getCurrentPages() // 擷取棧中全部界面的, 然後把資料寫入相應界面
    var currentPage  = pages[pages.length - 1]  //目前界面
    var prePage = pages[pages.length - 2]  //上一個界面
    var that = this
    prePage.setData({
     id: that.data.id,
    })

在A界面需要接受B界面傳過來值碼如下：這裡要在onShow方法裡面重新調用你的資料請求或是，為了驗證是否傳值成功，你可以列印驗證

注：由于你從B界面傳回A界面使用了wx.navigateBack，是以當你回到A界面後onLoad、onReady方法不響應，onShow方法響應，是以這裡你需要特别注意--生命周期

 
/**
    * 生命周期函數--監聽頁面顯示
    */
    onShow: function () {
      //擷取資料 
      this.gainData() 
      // 列印你的傳值
      console.log("res==", this.data.res)
    },

二、頁面内傳值

1 . 設定id的方法辨別跳轉後傳遞後的參數

在bindtap定義的點選方法 swiperTap : function(e) 中擷取

2 . 設定 data-xxx 的方法來辨別要傳遞的值

注 : 這裡 data-city_index="{{item.index}}"裡的 {{item.index}} 是有效的, 在用wx-for 渲染視圖層時, item.index 代表點選的下标. 在bindtap定義的點選方法 swiperTap : function(e) 中擷取, 即 
swiperTap: function(e){
  let index = e.currentTarget.dataset.city_index;
}

其他的參數取出也如此,

3.form表單和input輸入框

<form bindsubmit="forSubmit">
  <input name="detail" placeholder="詳細位址"></input>
  <input name="name" placeholder="姓名"></input>
  <input name="phone" placeholder="手機号" type="number"></input>
</form>

<input bindconfirm="confirm"/>
           
forSubmit: function(e){
  var detail = e.detail.value.detail;
  var name = e.detail.value.name;
  var phone = e.detail.value.phone;
}
// confirm
confirm: funtion(e){
  var a = e.detail.value
}

三、本地儲存

tips:本地資料存儲的大小限制為 10MB

每個微信小程式都可能用到本地緩存資料，這裡我們可以通過調用微信提供的方法：

wx.setStorage

、

wx.setStorageSync

、

wx.getStorage

、

wx.getStorageSync

、

wx.clearStorage

、

wx.clearStorageSync

、

實作對資料本地緩存

、

擷取

、

清除

。可參考微信小程式【資料緩存】開發文檔，檢視詳情。

在A界面擷取資料并緩存到本地

在B界面擷取資料并緩存到本地

var user_info = wx.getStorageSync("user_info")
     this.setData({
        username: user_info.username
     });

從本地緩存中同步移除指定 key。這裡具體使用同步或是異步需要根據你存儲時的方法，或是同步清理本地資料緩存wx.clearStorageSync()

同理你可以在B界面傳值在A界面取值，隻不過這裡你需要注意存儲、擷取的順序，先存後取，否則你是拿不到值的。

四、全局的app對象

這裡你需要在app.js檔案，寫好你要全局使用的資料

//使用者資料
        appData: {
            user_info:null,
        }

在你需要指派的地方引用app,代碼如下：

var app = getApp();
        app.appData.user_info = {"username"："jane"};

在你需要取值的地方引用app,代碼如下：

var app = getApp();
        var user_info = app.appData.user_info;
        this.setData({
            username: user_info.username
       });

總結不易，留下足迹!!!

參考連結:

[1]https://www.jianshu.com/p/b2d912920a6a

[2]https://www.jianshu.com/p/0135769db89c

小程式
上一篇: 小程式父子元件傳值
下一篇: 小程式回傳值

繼續閱讀