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

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

 更新時間:2018年01月30日 11:02:49   作者:KoalaShane  
這篇文章主要為大家詳細介紹了微信小程序數(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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 關于圖片的預加載過程中隱藏未知的

    關于圖片的預加載過程中隱藏未知的

    相信大家都看到過ie下的內存泄漏模式的文章,其中有一個模式就是循環(huán)引用,而閉包就有保存外部運行環(huán)境的能力(依賴于作用域鏈的實現(xiàn)),所以img.onload這個函數(shù)內部又保存了對img的引用,這樣就形成了循環(huán)引用,導致內存泄漏
    2012-12-12
  • JS中如何實現(xiàn)Laravel的route函數(shù)詳解

    JS中如何實現(xiàn)Laravel的route函數(shù)詳解

    這篇文章主要給大家介紹了JS中是如何實現(xiàn)Laravel的route函數(shù),文中通過示例代碼介紹的很詳細,相信對大家具有一定的參考價值,有需要的朋友們下面來一起看看吧。
    2017-02-02
  • javascript代碼壓縮工具的原理

    javascript代碼壓縮工具的原理

    JavaScript代碼壓縮對代碼進行一系列優(yōu)化處理,從而減小代碼的體積,提高網頁的加載速度,JavaScript代碼壓縮的原理包含去除代碼中的空格、注釋、不必要的換行符等無用字符,壓縮變量名、壓縮函數(shù)名等操作,將一些常見的操作(如+、-、*、/)轉換成更短的操作符(如@、^、#、|)
    2023-12-12
  • JavaScript實現(xiàn)簡易聊天對話框(加滾動條)

    JavaScript實現(xiàn)簡易聊天對話框(加滾動條)

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易聊天對話框,附加滾動條功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-02-02
  • 使用DeviceOne實現(xiàn)微信小程序功能

    使用DeviceOne實現(xiàn)微信小程序功能

    本文主要對小程序的優(yōu)缺點和DeviceOne的特點進行介紹,分享了使用DeviceOne實現(xiàn)微信小程序功能的實例代碼,具有一定的參考價值。下面跟著小編一起來看下吧
    2016-12-12
  • 微信小程序下面商品左右滑動上面tab也跟隨變動功能實現(xiàn)

    微信小程序下面商品左右滑動上面tab也跟隨變動功能實現(xiàn)

    這篇文章主要介紹了小程序下面商品左右滑動上面tab也跟隨變動功能,也就是點擊tab切換下面的商品信息,滑動下面的商品信息tab也進行切換,本文給大家分享實現(xiàn)代碼,需要的朋友可以參考下
    2022-07-07
  • JS保留小數(shù)點(四舍五入、四舍六入)實現(xiàn)思路及實例

    JS保留小數(shù)點(四舍五入、四舍六入)實現(xiàn)思路及實例

    保留兩位小數(shù):將浮點數(shù)四舍五入,取小數(shù)點后2位;如:2,會在2后面補上00.即2.00,感興趣的朋友看下具體的實現(xiàn)思路及代碼
    2013-04-04
  • javascript實現(xiàn)2016新年版日歷

    javascript實現(xiàn)2016新年版日歷

    這篇文章主要為大家介紹了javascript實現(xiàn)2016新年版日歷的詳細代碼,感興趣的小伙伴們可以參考一下
    2016-01-01
  • JS將數(shù)字轉換成三位逗號分隔的樣式(示例代碼)

    JS將數(shù)字轉換成三位逗號分隔的樣式(示例代碼)

    本篇文章主要是對JS將數(shù)字轉換成三位逗號分隔的樣式(示例代碼)進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-02-02
  • JavaScript 定義function的三種方式小結

    JavaScript 定義function的三種方式小結

    JavaScript中定義function有以下三種方式.
    2009-10-10

最新評論