結(jié)合自己在平時(shí)的開(kāi)發(fā)中遇到的各種問(wèn)題，和瀏覽各種問(wèn)題的解決方案總結(jié)出一些自己在日常開(kāi)發(fā)中常用的技巧和知點(diǎn),希望各位不吝斧正。

1.短生命周期數(shù)據(jù)存儲(chǔ)

以小程序啟動(dòng)到徹底關(guān)閉為周期的的數(shù)據(jù)建議存儲(chǔ)在app.js文件夾中,引用app.js:

const app =getApp();

假設(shè)Value是在小程序本次生命周期中經(jīng)常使用到的一個(gè)數(shù)據(jù)，比如說(shuō)請(qǐng)求API的Token，動(dòng)態(tài)的令牌等。那么就可以把這個(gè)值賦值到全局變量中去。實(shí)際上，并不是只有app.js中的globalData是全局變量，可以自己定義數(shù)據(jù)集。

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

對(duì)于app.js里面的token進(jìn)行賦值操作很簡(jiǎn)單,只要頁(yè)面引用了app.js

app.eduOS.token = Value;

這個(gè)數(shù)據(jù)在小程序的本次啟動(dòng)到徹底關(guān)閉后臺(tái)的周期中就是長(zhǎng)期存在的了，還可以根據(jù)需要進(jìn)行修改，Value可以是對(duì)象。

2.長(zhǎng)生命周期或者隱私數(shù)據(jù)存儲(chǔ)

這種數(shù)據(jù)的顯著特點(diǎn)是在小程序關(guān)閉再次重啟后依然存在，或者涉及到用戶的隱私信息但是需要復(fù)用，這種時(shí)候可以用本地緩存來(lái)解決這種問(wèn)題。

本地緩存的生命周期: 小程序被開(kāi)始使用 -----> 小程序被徹底從使用列表中移除。

小程序設(shè)置緩存的方式：

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});
      },
    })

比如保存用戶的登陸態(tài)信息，但是不能保存用戶的隱私數(shù)據(jù)，就可以采用這種方式。

或者是一個(gè)非時(shí)效性的數(shù)據(jù)，可以通過(guò)這種方式進(jìn)行存儲(chǔ)。

3.動(dòng)態(tài)信息或配置信息存儲(chǔ)

保存用戶的配置信息，在更換手機(jī)時(shí)能迅速完成配置同步。

商家小程序推薦商品修改，或者是內(nèi)容修正，或者是增加活動(dòng)，不可能每次都要重寫(xiě)然后再次讓小程序進(jìn)行審核。

對(duì)此，可以在后端服務(wù)器中保存這個(gè)信息。

以一個(gè)小程序的輪播廣告牌為例:

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

把這個(gè)數(shù)據(jù)存放在后臺(tái)服務(wù)器，每一次刷新該頁(yè)面都請(qǐng)求一次后臺(tái)數(shù)據(jù)，對(duì)內(nèi)容進(jìn)行修改。

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

類(lèi)似這種方式，完成對(duì)一些數(shù)據(jù)的動(dòng)態(tài)控制或者是云同步。

4.頁(yè)面間數(shù)據(jù)傳遞

1.url參數(shù)化

頁(yè)面間之間的數(shù)據(jù)傳遞一般是簡(jiǎn)單的，這種類(lèi)型的數(shù)據(jù)的生命周期是一次性的，用完即刪。

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

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

可以參照Http請(qǐng)求中的Get表單傳參方式來(lái)寫(xiě)頁(yè)面之間的傳參。

2.storge形式傳遞

如果需要傳送的數(shù)據(jù)太多，可通過(guò)Map<key ，Storge>進(jìn)行傳遞，具體內(nèi)容參考官方文檔。

wx.setStorge({
  key:'xxx',
  data:mydata
})
//獲取
wx.getStorgeSync('')

傳遞參數(shù)只需要傳遞一個(gè)key，在其他界面通過(guò)這個(gè)key再次去獲取本地緩存，對(duì)于這種類(lèi)型的數(shù)據(jù)，建議使用完后即時(shí)的刪除緩存。

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

3.使用全局變量作為中介

const app = getApp();
page({
 app.globalData.isBackvalue = ture;//確定是返回的值
 app.globalData.tmpData = value;//你要傳遞的值,也可以設(shè)置緩存
})

在返回的頁(yè)面獲取

const app = getApp();
...
onShow(){
  if(app.globalData.isBackValue){
   this.setData({
    XXX:app.globalData.tmpData
   })
   //或者是通過(guò)獲取緩存的方法進(jìn)行賦值
  }
}

4.頁(yè)面棧

該方法可以對(duì)所有入棧的頁(yè)面進(jìn)行賦值，有科班的同學(xué)可以理解為對(duì)樹(shù)的dfs遍歷入棧/出棧，棧內(nèi)頁(yè)面均可以進(jìn)行數(shù)據(jù)傳遞。

var allpages = getCurrentPages();//獲取全部頁(yè)面數(shù)據(jù)
//棧的下標(biāo)從 0 開(kāi)始,進(jìn)入頁(yè)面第一個(gè)加載的頁(yè)面數(shù)據(jù)是 allpages[0],當(dāng)前頁(yè)面是allpages[allpages.length - 1], 上一個(gè)頁(yè)面是allpages[allpages.length - 2]
var prepagedata = allpages[allpages.length - 2].data;//獲取上一頁(yè)面的數(shù)據(jù)。
var prepage = allpages[allpages.length - 2];//獲取上一頁(yè)面，包括數(shù)據(jù)和方法

//設(shè)置數(shù)據(jù)方法
prepage.setData({
 XXX:value //XXX 是上個(gè)頁(yè)面data中的參數(shù)，value是要設(shè)置的值
})
//調(diào)用函數(shù)方法,prepage中必須定義callfunction函數(shù)才可以調(diào)用
prepage.callfunction();

5.通信管道 EventChannel

Tips(如何理解通信管道):可以把該管道當(dāng)成url或storge傳遞信息形式的一種,不過(guò)是被封裝為Object形式了

A頁(yè)面?zhèn)鬟f

wx.navigateTo({
      url: 'B頁(yè)面',
      success:res=>{
        res.eventChannel.emit('channeldata', {name:'kindear'})
      }
})

B頁(yè)面接收

  onLoad: function (options) {
    let eventChannel = this.getOpenerEventChannel();
    eventChannel.on('channeldata', data => {
      console.log(data)
        //打印成功 {name:'kindear'}
    })
  }

總結(jié)

到此這篇關(guān)于微信小程序開(kāi)發(fā)實(shí)用技巧之?dāng)?shù)據(jù)傳遞和存儲(chǔ)的文章就介紹到這了,更多相關(guān)微信小程序數(shù)據(jù)傳遞和存儲(chǔ)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論