帶你瞭解微信小程式的取值、傳值、資料儲存
小程式介面設定如下
父級頁面: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"> <inputtype='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.資料儲存
我們會用到小程式的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, ......
三.總結
小程式瞭解到這些傳值取值過程,接通介面,呈現資料就快多了,還有哪些可以傳值取值的方法,歡迎大家留言哦,交流才能讓人進步,有什麼錯誤的地方也歡迎大家指正,我將進行更改,覺得博主寫的還可以的,歡迎點個關注,以後有空常來我的部落格逛逛,雖然可能寫的東西不是很高階,但是對於初級的人來說,還是能幫助到很多東西的,我的博文能幫助到大家我就很開心了,謝謝您百忙之中的觀看,一起加油進步,哇哈哈哈