您好,登錄后才能下訂單哦!
這篇文章主要介紹微信小程序開發(fā)中數(shù)據(jù)傳遞和存儲的示例分析,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
以小程序啟動到徹底關(guān)閉為周期的的數(shù)據(jù)建議存儲在app.js文件夾中,引用app.js:
const app =getApp();
假設(shè)Value是在小程序本次生命周期中經(jīng)常使用到的一個數(shù)據(jù),比如說請求API的Token,動態(tài)的令牌等。那么就可以把這個值賦值到全局變量中去。實際上,并不是只有app.js中的globalData是全局變量,可以自己定義數(shù)據(jù)集。
App({ eduOS:{ token:'' }, ... })
對于app.js里面的token進(jìn)行賦值操作很簡單,只要頁面引用了app.js
app.eduOS.token = Value;
這個數(shù)據(jù)在小程序的本次啟動到徹底關(guān)閉后臺的周期中就是長期存在的了,還可以根據(jù)需要進(jìn)行修改,Value可以是對象。
這種數(shù)據(jù)的顯著特點(diǎn)是在小程序關(guān)閉再次重啟后依然存在,或者涉及到用戶的隱私信息但是需要復(fù)用,這種時候可以用本地緩存來解決這種問題。
本地緩存的生命周期: 小程序被開始使用 -----> 小程序被徹底從使用列表中移除。
小程序設(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ù),就可以采用這種方式。
或者是一個非時效性的數(shù)據(jù),可以通過這種方式進(jìn)行存儲。
保存用戶的配置信息,在更換手機(jī)時能迅速完成配置同步。
商家小程序推薦商品修改,或者是內(nèi)容修正,或者是增加活動,不可能每次都要重寫然后再次讓小程序進(jìn)行審核。
對此,可以在后端服務(wù)器中保存這個信息。
以一個小程序的輪播廣告牌為例:
{ ad1:'imgurl1', ad2:'imgurl2', ad3:'imgurl3' }
把這個數(shù)據(jù)存放在后臺服務(wù)器,每一次刷新該頁面都請求一次后臺數(shù)據(jù),對內(nèi)容進(jìn)行修改。
wx.request({ url:'XXX', data:{}, success(res){ that.setData({ adList:res.data }) } })
類似這種方式,完成對一些數(shù)據(jù)的動態(tài)控制或者是云同步。
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請求中的Get表單傳參方式來寫頁面之間的傳參。
2.storge形式傳遞
如果需要傳送的數(shù)據(jù)太多,可通過Map<key ,Storge>進(jìn)行傳遞,具體內(nèi)容參考官方文檔。
wx.setStorge({ key:'xxx', data:mydata }) //獲取 wx.getStorgeSync('')
傳遞參數(shù)只需要傳遞一個key,在其他界面通過這個key再次去獲取本地緩存,對于這種類型的數(shù)據(jù),建議使用完后即時的刪除緩存。
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.頁面棧
該方法可以對所有入棧的頁面進(jìn)行賦值,有科班的同學(xué)可以理解為對樹的dfs遍歷入棧/出棧,棧內(nèi)頁面均可以進(jìn)行數(shù)據(jù)傳遞。
var allpages = getCurrentPages();//獲取全部頁面數(shù)據(jù) //棧的下標(biāo)從 0 開始,進(jìn)入頁面第一個加載的頁面數(shù)據(jù)是 allpages[0],當(dāng)前頁面是allpages[allpages.length - 1], 上一個頁面是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 是上個頁面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'} }) }
以上是“微信小程序開發(fā)中數(shù)據(jù)傳遞和存儲的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。