微信小程式開發技巧總結（一）

結合自己在平時的開發中遇到的各種問題，和浏覽各種問題的解決方案總結出一些自己在日常開發中常用的技巧和知點,希望各位不吝斧正。

1.短生命周期資料存儲

以小程式啟動到徹底關閉為周期的的資料建議存儲在app.js檔案夾中,引用app.js:

const app =getApp();

複制

假設Value是在小程式本次生命周期中經常使用到的一個資料，比如說請求API的Token，動态的令牌等。那麼就可以把這個值指派到全局變量中去。實際上，并不是隻有app.js中的globalData是全局變量，可以自己定義資料集。

App({
  eduOS:{
    token:''
  },
  ...
})

複制

對于app.js裡面的token進行指派操作很簡單,隻要頁面引用了app.js

app.eduOS.token = Value;

複制

這個資料在小程式的本次啟動到徹底關閉背景的周期中就是長期存在的了，還可以根據需要進行修改，Value可以是對象。

2.長生命周期或者隐私資料存儲

這種資料的顯著特點是在小程式關閉再次重新開機後依然存在，或者涉及到使用者的隐私資訊但是需要複用，這種時候可以用本地緩存來解決這種問題。

本地緩存的生命周期: 小程式被開始使用 -----> 小程式被徹底從使用清單中移除。

小程式設定緩存的方式：

wx.setStorage({
            key: 'educookie',
            data: {
              xh: that.data.xh,
              pwd: that.data.pwd
            }
          })

複制

小程式擷取緩存的方式:

var that = this;
 wx.getStorage({
      key: 'educookie',
      success: function(res) {
        that.setData({xh:res.data.xh,pwd:res.data.pwd});
      },
    })

複制

比如儲存使用者的登陸态資訊，但是不能儲存使用者的隐私資料，就可以采用這種方式。

或者是一個非時效性的資料，可以通過這種方式進行存儲。

3.動态資訊或配置資訊存儲

儲存使用者的配置資訊，在更換手機時能迅速完成配置同步。

商家小程式推薦商品修改，或者是内容修正，或者是增加活動，不可能每次都要重寫然後再次讓小程式進行稽核。

對此，可以在後端伺服器中儲存這個資訊。

以一個小程式的輪播廣告牌為例:

{
 ad1:'imgurl1',
 ad2:'imgurl2',
 ad3:'imgurl3'
}

複制

把這個資料存放在背景伺服器，每一次重新整理該頁面都請求一次背景資料，對内容進行修改。

wx.request({
    url:'XXX',
    data:{},
    success(res){
        that.setData({
            adList:res.data
        })
    }
})

複制

類似這種方式，完成對一些資料的動态控制或者是雲同步。

4.頁面間資料傳遞

頁面間之間的資料傳遞一般是簡單的，這種類型的資料的生命周期是一次性的，用完即删。

wx.navigatorTo({
    url:'../index/index?param1=value1&param2=value2'
})

複制

//在index頁面擷取
onLoad(options){
    console.log(options.param1);//value1
}

複制

可以參照Http請求中的Get表單傳參方式來寫頁面之間的傳參。

如果需要傳送的資料太多，可通過Map<key ，Storge>進行傳遞

wx.setStorge({
    key:'xxx',
    data:mydata
})

複制

傳遞參數隻需要傳遞一個key，在其他界面通過這個key再次去擷取本地緩存，對于這種類型的資料，建議使用完後即時的删除緩存。

wx.removeStorage({
  key: 'xxx',
  success(res) {
    console.log(res)
  }
})

複制

微信小程式開發技巧總結 （一）

微信小程式開發技巧總結（一）