怎么掌握微信小程序的取值、傳值、數據存儲

小程序界面設定如下

父級頁面：A界面

子級頁面：B界面

異級頁面：C界面

 

一.本頁面取值（A界面→A界面）

a.例如：input輸入文字獲取到value（鍵盤輸入時觸發）

wxml：

<input type='text' name="userName" maxlength="11" bindinput="userPhoneInput" ></input>

js:

data: {
    userPhone: '',
  },
  //手機號輸入框事件鍵盤輸入時觸發(文字提醒)
  userPhoneInput: function (e) {
    this.setData({
      userPhone: e.detail.value
    })
  },
  //接口取值格式
  onShow: function () {
    .....
    data:{
        UserPhoneNum:that.data.userPhone,
    },
    .....
  },

 

b.例如：input不輸入文字獲取到全部的value（鍵盤不輸入時觸發）

wxml：

<form bindsubmit="formSubmit">
        <input type='text' value='{{putdata.name}}' name="companyname" placeholder='請輸入你的姓名/公司名稱'></input>
        <input type='text' value='{{putdata.bankName}}' name="openbank" placeholder='請輸入你的開戶行全稱'></input>
        <button formType="submit">完成</button>
</form>

注：form表單與button綁定獲取input的內容

js:

//按鈕點擊事件
  formSubmit: function (e) {
    var companyname = e.detail.value.companyname;
    var openbank = e.detail.value.openbank;
    //根據name取input的value
    wx.request({
      url: aaaaaa,
      data: {
        name: companyname,
        bankName: openbank,
      },
      header: {
        'content-type': 'application/json',
      },
      success: function (res) {

      },
      fail: function () {

      }
    })
  }

 

二.異頁面傳值取值（A界面→B界面，A界面→C界面）

a.url傳值

用 navigator標簽或 wx.navigator傳值，A界面向B界面傳值；（不懂的自行安利小程序api和組件）

wxml:

// navigator標簽傳值
<navigator url="/page/index/index?id=1432&name=qima&password=hj1234" >傳值</navigator>

//wx.navigator傳值
wx.navigateTo({
      url: '/page/index/index?id=' + id +'&username='+ username+'&password='+ password
})

下一個頁面取值方法：

js:

data: {
    id : "" ,
    name : "" ,
    password : "",
  },
onLoad: function (options) {
    var id = options.id;
    var name = options.name;
    var password = options.password;
    this.setData({
      id:id,
      name:name,
      password:password,
    })
},

一般小程序能不用接口解決的就不要用到接口呈現數據，可以用URL傳值，到下一個頁面取值，然后呈現到頁面即可；

 

b.數據存儲

附加：小程序list數據點擊獲取對應的id，我們可以通過設置item的id來標識或者通過設置鍵值data-xxxx的方式標識，

比如：

<view class='puttype-list' wx:for="{{tabitem}}" wx:key="*this" bindtap="choice" data-id="{{item.id}}">
      <view class='puttype-list-con'>
            <text>{{item.text}}</text>
            <view class='hint'></view>
      </view>
</view>

然后，我們通過，如果是id那么e.currentTarget.id 即可獲取該元素id。如果是data-id那么e.currentTarget.dataset.id 即可獲取你自己設置的data-id里面值。

//發布類型選擇
  choice: function (e) {
    var id = e.currentTarget.dataset.id;
    console.log(id)
    wx.setStorageSync('articleId', id);
    wx.navigateTo({
      url: '../put/put',
    });
  },

 

我們會用到小程序的api,通過調用微信提供的方法：wx.setStorage、wx.setStorageSync、wx.getStorage、wx.getStorageSync、wx.clearStorage、wx.clearStorageSync、實現對數據本地緩存、獲取、清除。

js緩存:

我們獲取接口傳回的數據，id,code之類的，我們做全局儲存，命名一個key和內容value；

wx.request({
        url: aaaaa,
        data: {
          UserPhoneNum: '86//' + that.data.userPhone,
          Password: that.data.passWd,
          IP: that.data.IP,
        },
        header: {
          'content-type': 'application/json',
        },
        success: function (res) {
          console.log(res.data),
          //存儲格式 wx.setStorageSync('key命名', value內容);
          wx.setStorageSync('salemanId', res.data.salemanId);
          wx.setStorageSync('salemanLevel', res.data.salemanLevel);
          if (res.data.state == 200){
            
          }else{
           
          }
        },
 })

js獲取：

根據key獲取到數據，緩存到本地或上傳到接口；

//根據key獲取到緩存的值
var salemanId= wx.getStorageSync("salemanId");

js清除：

從本地緩存中同步移除指定 key。這里具體使用同步或是異步需要根據你存儲時的方法，或是同步清理本地數據緩存；

//清除數據
wx.removeStorageSync("salemanId")

 

查看自己緩存數據地點：（如圖）

 

 

c.全局App對象

在我們的app.js文件里面，我們需要寫好我們需要全局使用的數據；

//用戶學校數據
 globalData: {
     school:null,
 }

我們需要給它賦值，賦值代碼如下：

var self = this
......
self.globalData.school = res.data.schoolID

在我們需要取值的地方引用全局的app.js,然后取值：

var app = getApp();
onLoad: function () {
    var that = this; 
    //調用應用實例的方法獲取全局數據  
    app.getUserSchool(function (school) {
      //更新數據  
    })
},
//取值
......
school: app.globalData.school,
......

 

三.總結

小程序了解到這些傳值取值過程，接通接口，呈現數據就快多了，還有哪些可以傳值取值的方法，歡迎大家留言哦，交流才能讓人進步，有什么錯誤的地方也歡迎大家指正，我將進行更改，覺得博主寫的還可以的，歡迎點個關注，以后有空常來我的博客逛逛，雖然可能寫的東西不是很高級，但是對於初級的人來說，還是能幫助到很多東西的，我的博文能幫助到大家我就很開心了，謝謝您百忙之中的觀看，一起加油進步，哇哈哈哈