微信小程序數(shù)據(jù)存儲(chǔ)與取值詳解
在小程序開(kāi)發(fā)的過(guò)程,經(jīng)常要需要這個(gè)頁(yè)面輸入的數(shù)據(jù),在下一個(gè)頁(yè)面中進(jìn)行取值賦值。
比如:
在A頁(yè)面input輸入框,輸入電話(huà)號(hào)碼,點(diǎn)擊添加。需要在B頁(yè)面電話(huà)區(qū)域中,顯示剛剛輸入的電話(huà)號(hào)碼。
因?yàn)檫@是兩個(gè)頁(yè)面,就需要先存儲(chǔ),再取值。微信小程序提供了數(shù)據(jù)存儲(chǔ)的API,wx.setStorage(OBJECT) 可以將數(shù)據(jù)存儲(chǔ)在本地緩存中指定的 key 中,如果重復(fù)會(huì)覆蓋掉原來(lái)該 key 對(duì)應(yīng)的內(nèi)容。
思路是,在A頁(yè)面,使用bindinput獲取input輸入的值,賦值給一個(gè)變量(自定義),點(diǎn)擊添加按鈕時(shí),如果變量不為空,將變量的值存儲(chǔ)在本地緩存中,在B頁(yè)面,使用wx.getStorage(OBJECT) 方法取值;
ps : 源代碼在頁(yè)面底部
代碼如下:
對(duì)input輸入框,綁定事件bindinput="bindKeyInput" ,設(shè)置value="{{inputValue}}" ,因?yàn)殡娫?huà)號(hào)碼為數(shù)字,設(shè)置type="number" 。對(duì)按鈕添加點(diǎn)擊事件bindtap="addbtn"
在JS文件中添加代碼
B頁(yè)面代碼
在JS文件中,聲明變量addtel。在頁(yè)面切換過(guò)來(lái)的時(shí)候,取出我們剛存儲(chǔ)的值,賦值給變量addtel。在需要顯示電話(huà)號(hào)碼的地方,用變量來(lái)接收。
在JS文件中添加代碼
data:{ addtel : '' }
這里在onShow的方法中進(jìn)行取值,當(dāng)小程序啟動(dòng),或從后臺(tái)進(jìn)入前臺(tái)顯示,就會(huì)觸發(fā) onShow。
不過(guò),每個(gè)微信小程序都可以有自己的本地緩存,使用這些方法時(shí),要注意本地緩存最大為10MB,wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)可以對(duì)本地緩存進(jìn)行設(shè)置、獲取和清理。。
也可以使用wx.clearStorage(wx.clearStorageSync)來(lái)清理緩存。
代碼寫(xiě)完之后,進(jìn)行測(cè)試。
在輸入框中輸入電話(huà)號(hào)碼,點(diǎn)擊添加。
OK,取值成功。
A頁(yè)面源代碼:
<view class="add-page"> <input placeholder="輸入手機(jī)號(hào)添加客戶(hù)" type="number" bindinput="bindKeyInput" value="{{inputValue}}" /> <button type="warn" class="add-btn" bindtap="addbtn" >添加</button> </view>
var app = getApp() Page({ data: { inputValue:'' }, bindKeyInput:function(e){ this.setData({ inputValue: e.detail.value }) }, addbtn:function(){ if(this.data.inputValue){ wx.redirectTo({ url: '../ordered/ordered' }) wx.setStorage({ key:"addTel", data:this.data.inputValue }) }else{ wx.showModal({ title: '手機(jī)號(hào)為空', content: '請(qǐng)輸入手機(jī)號(hào)碼', success: function(res) { if (res.confirm) { console.log('用戶(hù)點(diǎn)擊確定') } } }) } }, onload:function(){ //onload } })
B頁(yè)面源代碼:
<view class="menu-item"> <navigator class="menu-item-main" > <text class="menu-item-name">電話(huà)</text> <view class="ordtel"> <text class="ordtext">{{addtel}}</text> <image class="menu-item-icon" src="/image/tel.png"></image> </view> </navigator> </view>
var app = getApp() Page({ data:{ addtel : '' }, onShow:function(){ var that = this; wx.getStorage({ key: 'addTel', success: function(res) { console.log(res.data) that.setData({ addtel:res.data }) } }) } })
其他相關(guān)資料可以查閱小程序官方API。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于圖片的預(yù)加載過(guò)程中隱藏未知的
相信大家都看到過(guò)ie下的內(nèi)存泄漏模式的文章,其中有一個(gè)模式就是循環(huán)引用,而閉包就有保存外部運(yùn)行環(huán)境的能力(依賴(lài)于作用域鏈的實(shí)現(xiàn)),所以img.onload這個(gè)函數(shù)內(nèi)部又保存了對(duì)img的引用,這樣就形成了循環(huán)引用,導(dǎo)致內(nèi)存泄漏2012-12-12JS中如何實(shí)現(xiàn)Laravel的route函數(shù)詳解
這篇文章主要給大家介紹了JS中是如何實(shí)現(xiàn)Laravel的route函數(shù),文中通過(guò)示例代碼介紹的很詳細(xì),相信對(duì)大家具有一定的參考價(jià)值,有需要的朋友們下面來(lái)一起看看吧。2017-02-02JavaScript實(shí)現(xiàn)簡(jiǎn)易聊天對(duì)話(huà)框(加滾動(dòng)條)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易聊天對(duì)話(huà)框,附加滾動(dòng)條功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02使用DeviceOne實(shí)現(xiàn)微信小程序功能
本文主要對(duì)小程序的優(yōu)缺點(diǎn)和DeviceOne的特點(diǎn)進(jìn)行介紹,分享了使用DeviceOne實(shí)現(xiàn)微信小程序功能的實(shí)例代碼,具有一定的參考價(jià)值。下面跟著小編一起來(lái)看下吧2016-12-12微信小程序下面商品左右滑動(dòng)上面tab也跟隨變動(dòng)功能實(shí)現(xiàn)
這篇文章主要介紹了小程序下面商品左右滑動(dòng)上面tab也跟隨變動(dòng)功能,也就是點(diǎn)擊tab切換下面的商品信息,滑動(dòng)下面的商品信息tab也進(jìn)行切換,本文給大家分享實(shí)現(xiàn)代碼,需要的朋友可以參考下2022-07-07JS保留小數(shù)點(diǎn)(四舍五入、四舍六入)實(shí)現(xiàn)思路及實(shí)例
保留兩位小數(shù):將浮點(diǎn)數(shù)四舍五入,取小數(shù)點(diǎn)后2位;如:2,會(huì)在2后面補(bǔ)上00.即2.00,感興趣的朋友看下具體的實(shí)現(xiàn)思路及代碼2013-04-04javascript實(shí)現(xiàn)2016新年版日歷
這篇文章主要為大家介紹了javascript實(shí)現(xiàn)2016新年版日歷的詳細(xì)代碼,感興趣的小伙伴們可以參考一下2016-01-01JS將數(shù)字轉(zhuǎn)換成三位逗號(hào)分隔的樣式(示例代碼)
本篇文章主要是對(duì)JS將數(shù)字轉(zhuǎn)換成三位逗號(hào)分隔的樣式(示例代碼)進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02JavaScript 定義function的三種方式小結(jié)
JavaScript中定義function有以下三種方式.2009-10-10