微信小程序數(shù)據存儲與取值詳解
在小程序開發(fā)的過程,經常要需要這個頁面輸入的數(shù)據,在下一個頁面中進行取值賦值。
比如:
在A頁面input輸入框,輸入電話號碼,點擊添加。需要在B頁面電話區(qū)域中,顯示剛剛輸入的電話號碼。
因為這是兩個頁面,就需要先存儲,再取值。微信小程序提供了數(shù)據存儲的API,wx.setStorage(OBJECT) 可以將數(shù)據存儲在本地緩存中指定的 key 中,如果重復會覆蓋掉原來該 key 對應的內容。
思路是,在A頁面,使用bindinput獲取input輸入的值,賦值給一個變量(自定義),點擊添加按鈕時,如果變量不為空,將變量的值存儲在本地緩存中,在B頁面,使用wx.getStorage(OBJECT) 方法取值;
ps : 源代碼在頁面底部
代碼如下:
對input輸入框,綁定事件bindinput="bindKeyInput" ,設置value="{{inputValue}}" ,因為電話號碼為數(shù)字,設置type="number" 。對按鈕添加點擊事件bindtap="addbtn"
在JS文件中添加代碼
B頁面代碼
在JS文件中,聲明變量addtel。在頁面切換過來的時候,取出我們剛存儲的值,賦值給變量addtel。在需要顯示電話號碼的地方,用變量來接收。
在JS文件中添加代碼
data:{ addtel : '' }
這里在onShow的方法中進行取值,當小程序啟動,或從后臺進入前臺顯示,就會觸發(fā) onShow。
不過,每個微信小程序都可以有自己的本地緩存,使用這些方法時,要注意本地緩存最大為10MB,wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)可以對本地緩存進行設置、獲取和清理。。
也可以使用wx.clearStorage(wx.clearStorageSync)來清理緩存。
代碼寫完之后,進行測試。
在輸入框中輸入電話號碼,點擊添加。
OK,取值成功。
A頁面源代碼:
<view class="add-page"> <input placeholder="輸入手機號添加客戶" 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: '手機號為空', content: '請輸入手機號碼', success: function(res) { if (res.confirm) { console.log('用戶點擊確定') } } }) } }, onload:function(){ //onload } })
B頁面源代碼:
<view class="menu-item"> <navigator class="menu-item-main" > <text class="menu-item-name">電話</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 }) } }) } })
其他相關資料可以查閱小程序官方API。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JS中如何實現(xiàn)Laravel的route函數(shù)詳解
這篇文章主要給大家介紹了JS中是如何實現(xiàn)Laravel的route函數(shù),文中通過示例代碼介紹的很詳細,相信對大家具有一定的參考價值,有需要的朋友們下面來一起看看吧。2017-02-02JavaScript實現(xiàn)簡易聊天對話框(加滾動條)
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易聊天對話框,附加滾動條功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-02-02微信小程序下面商品左右滑動上面tab也跟隨變動功能實現(xiàn)
這篇文章主要介紹了小程序下面商品左右滑動上面tab也跟隨變動功能,也就是點擊tab切換下面的商品信息,滑動下面的商品信息tab也進行切換,本文給大家分享實現(xiàn)代碼,需要的朋友可以參考下2022-07-07JS保留小數(shù)點(四舍五入、四舍六入)實現(xiàn)思路及實例
保留兩位小數(shù):將浮點數(shù)四舍五入,取小數(shù)點后2位;如:2,會在2后面補上00.即2.00,感興趣的朋友看下具體的實現(xiàn)思路及代碼2013-04-04