欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序數(shù)據(jù)存儲(chǔ)與取值詳解

 更新時(shí)間:2018年01月30日 11:02:49   作者:KoalaShane  
這篇文章主要為大家詳細(xì)介紹了微信小程序數(shù)據(jù)存儲(chǔ)與取值的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

在小程序開(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)文章

最新評(píng)論