怎么掌握微信小程序的取值、傳值、數(shù)據(jù)存儲
小程序界面設定如下
父級頁面：A界面
子級頁面：B界面
異級頁面：C界面
一.本頁面取值（A界面→A界面）
a.例如：input輸入文字獲取到value（鍵盤輸入時觸發(fā)）
wxml：
<input type='text' name="userName" maxlength="11" bindinput="userPhoneInput" ></input>
js:
復制代碼
data: {
userPhone: '',
},
//手機號輸入框事件鍵盤輸入時觸發(fā)(文字提醒)
userPhoneInput: function (e) {
this.setData({
userPhone: e.detail.value
})
},
//接口取值格式
onShow: function () {
.....
data:{
UserPhoneNum:that.data.userPhone,
},
.....
},
|
b.例如：input不輸入文字獲取到全部的value（鍵盤不輸入時觸發(fā)）
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;
//根據(jù)name取input的value
wx.request({
url: aaaaaa,
data: {
name: companyname,
bankName: openbank,
},
header: {
'content-type': 'application/json',
},
success: function (res) {
},
fail: function () {
}
})
}
|
二.異頁面?zhèn)髦等≈担ˋ界面→B界面，A界面→C界面）
a.url傳值
用 navigator標簽或 wx.navigator傳值，A界面向B界面?zhèn)髦担唬ú欢淖孕邪怖〕绦騛pi和組件）
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,
})
},
|
一般小程序能不用接口解決的就不要用到接口呈現(xiàn)數(shù)據(jù)，可以用URL傳值，到下一個頁面取值，然后呈現(xiàn)到頁面即可；
b.數(shù)據(jù)存儲
我們會用到小程序的api,通過調用微信提供的方法：wx.setStorage、wx.setStorageSync、wx.getStorage、wx.getStorageSync、wx.clearStorage、wx.clearStorageSync、實現(xiàn)對數(shù)據(jù)本地緩存、獲取、清除。
js緩存:
我們獲取接口傳回的數(shù)據(jù)，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獲取：
根據(jù)key獲取到數(shù)據(jù)，緩存到本地或上傳到接口；
//根據(jù)key獲取到緩存的值
var salemanId= wx.getStorageSync("salemanId");
js清除：
從本地緩存中同步移除指定 key。這里具體使用同步或是異步需要根據(jù)你存儲時的方法，或是同步清理本地數(shù)據(jù)緩存；
//清除數(shù)據(jù)
wx.removeStorageSync("salemanId")
查看自己緩存數(shù)據(jù)地點：（如圖）
c.全局App對象
在我們的app.js文件里面，我們需要寫好我們需要全局使用的數(shù)據(jù)；
//用戶學校數(shù)據(jù)
globalData: {
school:null,
}
我們需要給它賦值，賦值代碼如下：
var self = this ...... self.globalData.school = res.data.schoolID
在我們需要取值的地方引用全局的app.js,然后取值：
var app = getApp();
onLoad: function () {
var that = this;
//調用應用實例的方法獲取全局數(shù)據(jù)
app.getUserSchool(function (school) {
//更新數(shù)據(jù)
})
},
//取值
......
school: app.globalData.school,
......
|
三.總結
小程序了解到這些傳值取值過程，接通接口，呈現(xiàn)數(shù)據(jù)就快多了，還有哪些可以傳值取值的方法，歡迎大家留言哦，交流才能讓人進步，有什么錯誤的地方也歡迎大家指正，我將進行更改，覺得博主寫的還可以的，歡迎點個關注，以后有空常來我的博客逛逛，雖然可能寫的東西不是很高級，但是對于初級的人來說，還是能幫助到很多東西的，我的博文能幫助到大家我就很開心了，謝謝您百忙之中的觀看，一起加油進步，哇哈哈哈
