微信小程序開發(fā)實(shí)用技巧之?dāng)?shù)據(jù)傳遞和存儲(chǔ)
結(jié)合自己在平時(shí)的開發(fā)中遇到的各種問題,和瀏覽各種問題的解決方案總結(jié)出一些自己在日常開發(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ù),比如說請(qǐng)求API的Token,動(dòng)態(tài)的令牌等。那么就可以把這個(gè)值賦值到全局變量中去。實(shí)際上,并不是只有app.js中的globalData是全局變量,可以自己定義數(shù)據(jù)集。
App({
eduOS:{
token:''
},
...
})
對(duì)于app.js里面的token進(jìn)行賦值操作很簡單,只要頁面引用了app.js
app.eduOS.token = Value;
這個(gè)數(shù)據(jù)在小程序的本次啟動(dòng)到徹底關(guān)閉后臺(tái)的周期中就是長期存在的了,還可以根據(jù)需要進(jìn)行修改,Value可以是對(duì)象。
2.長生命周期或者隱私數(shù)據(jù)存儲(chǔ)
這種數(shù)據(jù)的顯著特點(diǎn)是在小程序關(guān)閉再次重啟后依然存在,或者涉及到用戶的隱私信息但是需要復(fù)用,這種時(shí)候可以用本地緩存來解決這種問題。
本地緩存的生命周期: 小程序被開始使用 -----> 小程序被徹底從使用列表中移除。
小程序設(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ù),可以通過這種方式進(jìn)行存儲(chǔ)。
3.動(dòng)態(tài)信息或配置信息存儲(chǔ)
保存用戶的配置信息,在更換手機(jī)時(shí)能迅速完成配置同步。
商家小程序推薦商品修改,或者是內(nèi)容修正,或者是增加活動(dòng),不可能每次都要重寫然后再次讓小程序進(jìn)行審核。
對(duì)此,可以在后端服務(wù)器中保存這個(gè)信息。
以一個(gè)小程序的輪播廣告牌為例:
{
ad1:'imgurl1',
ad2:'imgurl2',
ad3:'imgurl3'
}
把這個(gè)數(shù)據(jù)存放在后臺(tái)服務(wù)器,每一次刷新該頁面都請(qǐng)求一次后臺(tái)數(shù)據(jù),對(duì)內(nèi)容進(jìn)行修改。
wx.request({
url:'XXX',
data:{},
success(res){
that.setData({
adList:res.data
})
}
})
類似這種方式,完成對(duì)一些數(shù)據(jù)的動(dòng)態(tài)控制或者是云同步。
4.頁面間數(shù)據(jù)傳遞
1.url參數(shù)化
頁面間之間的數(shù)據(jù)傳遞一般是簡單的,這種類型的數(shù)據(jù)的生命周期是一次性的,用完即刪。
wx.navigatorTo({
url:'../index/index?param1=value1¶m2=value2'
})
//在index頁面獲取
onLoad(options){
console.log(options.param1);//value1
}
可以參照Http請(qǐng)求中的Get表單傳參方式來寫頁面之間的傳參。
2.storge形式傳遞
如果需要傳送的數(shù)據(jù)太多,可通過Map<key ,Storge>進(jìn)行傳遞,具體內(nèi)容參考官方文檔。
wx.setStorge({
key:'xxx',
data:mydata
})
//獲取
wx.getStorgeSync('')
傳遞參數(shù)只需要傳遞一個(gè)key,在其他界面通過這個(gè)key再次去獲取本地緩存,對(duì)于這種類型的數(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è)置緩存
})
在返回的頁面獲取
const app = getApp();
...
onShow(){
if(app.globalData.isBackValue){
this.setData({
XXX:app.globalData.tmpData
})
//或者是通過獲取緩存的方法進(jìn)行賦值
}
}
4.頁面棧
該方法可以對(duì)所有入棧的頁面進(jìn)行賦值,有科班的同學(xué)可以理解為對(duì)樹的dfs遍歷入棧/出棧,棧內(nèi)頁面均可以進(jìn)行數(shù)據(jù)傳遞。
var allpages = getCurrentPages();//獲取全部頁面數(shù)據(jù)
//棧的下標(biāo)從 0 開始,進(jìn)入頁面第一個(gè)加載的頁面數(shù)據(jù)是 allpages[0],當(dāng)前頁面是allpages[allpages.length - 1], 上一個(gè)頁面是allpages[allpages.length - 2]
var prepagedata = allpages[allpages.length - 2].data;//獲取上一頁面的數(shù)據(jù)。
var prepage = allpages[allpages.length - 2];//獲取上一頁面,包括數(shù)據(jù)和方法
//設(shè)置數(shù)據(jù)方法
prepage.setData({
XXX:value //XXX 是上個(gè)頁面data中的參數(shù),value是要設(shè)置的值
})
//調(diào)用函數(shù)方法,prepage中必須定義callfunction函數(shù)才可以調(diào)用
prepage.callfunction();
5.通信管道 EventChannel
Tips(如何理解通信管道):可以把該管道當(dāng)成url或storge傳遞信息形式的一種,不過是被封裝為Object形式了
A頁面?zhèn)鬟f
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'}
})
}
總結(jié)
到此這篇關(guān)于微信小程序開發(fā)實(shí)用技巧之?dāng)?shù)據(jù)傳遞和存儲(chǔ)的文章就介紹到這了,更多相關(guān)微信小程序數(shù)據(jù)傳遞和存儲(chǔ)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 微信小程序 頁面跳轉(zhuǎn)和數(shù)據(jù)傳遞實(shí)例詳解
- 微信小程序 頁面跳轉(zhuǎn)及數(shù)據(jù)傳遞詳解
- 微信小程序 動(dòng)態(tài)修改頁面數(shù)據(jù)及參數(shù)傳遞過程詳解
- 微信小程序?qū)W習(xí)筆記之跳轉(zhuǎn)頁面、傳遞參數(shù)獲得數(shù)據(jù)操作圖文詳解
- 微信小程序開發(fā)之?dāng)?shù)據(jù)存儲(chǔ) 參數(shù)傳遞 數(shù)據(jù)緩存
- 微信小程序跨頁面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過程解析
- 微信小程序 跳轉(zhuǎn)傳遞數(shù)據(jù)的實(shí)例
相關(guān)文章
不得不分享的JavaScript常用方法函數(shù)集(上)
不得不分享的JavaScript常用方法函數(shù)集,幫助大家更好的學(xué)習(xí)javascript程序設(shè)計(jì),有興趣的朋友可以參考一下2015-12-12
深入理解JavaScript系列(46):代碼復(fù)用模式(推薦篇)詳解
這篇文章主要介紹了深入理解JavaScript系列(46):代碼復(fù)用模式(推薦篇)詳解,本文講解了原型繼承、復(fù)制所有屬性進(jìn)行繼承、混合(mix-in)、借用方法等模式,需要的朋友可以參考下2015-03-03
學(xué)習(xí)Javascript面向?qū)ο缶幊讨庋b
這篇文章主要幫助大家學(xué)習(xí)Javascript面向?qū)ο缶幊讨庋b,由淺入深的介紹了封裝的概念定義,感興趣的小伙伴們可以參考一下2016-02-02
一些常用的JavaScript函數(shù)(json)附詳細(xì)說明
一些常用的JavaScript函數(shù)(json)附詳細(xì)說明,學(xué)習(xí)js的朋友可以參考下。2011-05-05
JavaScript獲取當(dāng)前網(wǎng)頁標(biāo)題(title)的方法
這篇文章主要介紹了JavaScript獲取當(dāng)前網(wǎng)頁標(biāo)題(title)的方法,涉及javascript中document.title方法的使用,需要的朋友可以參考下2015-04-04
js實(shí)現(xiàn)圖片數(shù)組中圖片切換效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片數(shù)組中圖片切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07

