1. 程式人生 > >微信小程式頁面之間傳遞引數的幾種方式

微信小程式頁面之間傳遞引數的幾種方式

小程式開發過程中,不可避免要遇到不同頁面之間資料通訊的問題,如判斷是否登入等,現做出以下分類總結

一、使用全域性變數實現資料傳遞

使用場景:

購物車介面需要根據是否登入來區別顯示,當沒有登入時提醒去登入,登入後之間顯示自己購物車裡的商品列表

全域性變數使用方法:

再 app.js 檔案中定義全域性變數 globalData, 如下:將使用者資訊存放在 userInfo 中

//app.js
  App({
  onLaunch: function () {
    // 登入
    wx.login({
      success: res => {
        // 傳送 res.code 到後臺換取 openId, sessionKey, unionId
} }) }, // 全域性變數 globalData: { userInfo: null } })

購物車介面獲取全域性變數userInfo 的值,判斷使用者是否登入

  onLoad: function (options) {
    var app = getApp();
    if (app.globalData.userInfo === null){
      this.setData({ "haveLogin": false});
    }else {
      this.setData({ "haveLogin": true});
    }
  },

登入介面,登入成功後,將使用者資訊儲存到全域性變數中

      wx.request({
        url: 'your url',
        method: 'POST',
        data: { "acount": acount, "aPWD": aPWD, "phone": acount, "pPWD": aPWD},
        success: function(res) {
          if(res.code === 1){
            getAPP().globalData.userInfo = res.userInfo;
          }
        },
        fail: function
(err) {
console.log(err) } })

二、頁面跳轉或重定向時,使用url帶引數傳遞資料

使用場景:

點選產品列表中的某一項,跳轉到對應的產品詳情頁面

使用方法:

產品列表中要保證每一項都有個id,點選的時候獲取id即可

  toSomeone: function (event) {
    wx.navigateTo({
      url: 'some/some?id=' + event.target.id,
    })
  }

詳情頁獲取傳遞來的資料:

  onLoad: function (options) {
    console.log(options)
  },

*注: 如果傳遞引數是 json 資料,需要使用JSON.stringify,然後在後臺邏輯之中使用JSON.parse序列化成物件使用,而且傳遞的資料有位元組也有限制

三、使用元件模板 template傳遞引數

使用場景:

我們在排版專案頁面的時候,習慣將相同樣式的模組拆分成一個模板,在需要用的時候,直接引用模板,這樣就可以避免多次排版,同時還方便維護。

使用方法:

不知道怎麼使用 template 的同學們, 可以看一下我的上一篇博文(小程式template使用方法),那裡詳細描述瞭如何使用template的方法,這裡就不在贅述了。

 <template is="good" data="{{data}}"></template>

四、使用快取傳遞引數

使用場景:

登入成功後將使用者資訊放入快取,購物車獲取顯示使用者資料

使用方法:
    //快取資料
      wx.setStorage({
        key: 'userInfo',
        data: res.userInfo
      })
  getUsersInfo: function () {
    //讀取快取登入
    wx.getStorage({
      key: 'userInfo',
      success: function (res) {
        this.userInfo = res.userInfo;
      }
    })
  }

五、使用資料庫傳遞資料

使用場景:

購物車中新增商品之後,直接儲存到資料庫中,然後購物車介面的產品顯示,直接從資料庫中獲取資料。

使用方法:
//新增商品
  addGoods: function (good) {
    wx.request({
      url: 'your url',
      method: 'POST',
      header: {
        'content-type': 'application/json'
      },
      data: good,
      success: function (res) {
        this.setData({ "goodsList": res.data })
      }
    })
  },
//獲取資料
getGoodsList: function () {
    wx.request({
      url: 'your url',
      method: 'GET',
      success: function (res) {
        this.getGoodsList();
      }
    })
  }

本次總結就到這裡了,覺得有用就在左上點個贊再走唄~~