微信小程序開發技巧總結 （一）-- 數據傳遞和存儲

結合本身在平時的開發中遇到的各類問題，和瀏覽各類問題的解決方案總結出一些本身在平常開發中經常使用的技巧和知點,但願各位不吝斧正。

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.頁面間數據傳遞

1.url參數化

頁面間之間的數據傳遞通常是簡單的，這種類型的數據的生命週期是一次性的，用完即刪。

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

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

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

2.storge形式傳遞

若是須要傳送的數據太多，可經過Map<key ，Storge>進行傳遞，具體內容參考官方文檔。

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

傳遞參數只須要傳遞一個key，在其餘界面經過這個key再次去獲取本地緩存，對於這種類型的數據，建議使用完後即時的刪除緩存。

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

3.使用全局變量做爲中介

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

在返回的頁面獲取

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

4.頁面棧

該方法能夠對全部入棧的頁面進行賦值，有科班的同窗能夠理解爲對樹的dfs遍歷入棧/出棧，棧內頁面都可以進行數據傳遞。

var allpages = getCurrentPages();//獲取所有頁面數據
//棧的下標從 0 開始,進入頁面第一個加載的頁面數據是 allpages[0],當前頁面是allpages[allpages.length - 1], 上一個頁面是allpages[allpages.length - 2]
var prepagedata = allpages[allpages.length - 2].data;//獲取上一頁面的數據。
var prepage = allpages[allpages.length - 2];//獲取上一頁面，包括數據和方法

//設置數據方法
prepage.setData({
	XXX:value //XXX 是上個頁面data中的參數，value是要設置的值
})
//調用函數方法,prepage中必須定義callfunction函數才能夠調用
prepage.callfunction();

5.通訊管道 EventChannel

Tips(如何理解通訊管道):能夠把該管道當成url或storge傳遞信息形式的一種,不過是被封裝爲Object形式了

A頁面傳遞

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

B頁面接收

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

開發聯繫Q 1025584691