本文實(shí)例為大家分享了微信小程序實(shí)現(xiàn)form表單本地儲(chǔ)存數(shù)據(jù)的具體代碼，供大家參考，具體內(nèi)容如下
效果圖：
主要利用小程序的getStorage來實(shí)現(xiàn)異步本地儲(chǔ)存。
小程序目錄結(jié)構(gòu)如下：
新建項(xiàng)目前，為了簡化操作可直接右鍵新建目錄，這樣建出來的文件會(huì)直接寫在app.json中，無需手動(dòng)添加。
login.wxml代碼：
<!--pages/login/login.wxml--><view class='container'> <form bindsubmit='submit'> <view class='row'> <text>姓名:</text> <input type='text' name='userName' placeholder='請(qǐng)輸入姓名' value='{{userName}}'/> </view> <view class='row'> <text>密碼:</text> <input type='password' name='passWord' placeholder='請(qǐng)輸入密碼' value='{{passWord}}'/> </view> <view> <button form-type='submit' type='primary'>登陸</button> </view> </form></view>login.wxss樣式：
/* pages/login/login.wxss */.container{ padding: 1rem; font-size: 0.9rem; line-height: 1.5rem; border-shadow: 1px 1px #0099CC;}.row{ display: flex; align-items: center; margin-bottom: 0.8rem;}.row text{ flex-grow: 1; text-align: right;}.row input{ font-size: 0.7rem; color: #ccc; flex-grow: 3; border: 1px solid #0099CC; display: inline-block; border-radius: 0.3rem; box-shadow: 0 0 0.15rem #aaa; padding: 0.3rem;}.row button{ padding: 0 2rem;}重點(diǎn)login.js來了：
// pages/login/login.jsPage({ /** * 頁面的初始數(shù)據(jù) */ data: { userName:'', passWord:'' }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { }, /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function () { }})點(diǎn)擊登陸時(shí)，觸發(fā)submit函數(shù)，如下：
submit:function(e){ console.log(e.detail.value); //表單數(shù)據(jù) var objData = e.detail.value; if (objData.userName && objData.passWord){ //異步方式儲(chǔ)存表單數(shù)據(jù) wx.setStorage({ key: 'userName', data: objData.userName, }) wx.setStorage({ key: 'passWord', data: objData.passWord, }) wx.navigateTo({ url: '../detail/detail', }) } },儲(chǔ)存好數(shù)據(jù)后，下次再打開該頁面，先判斷是否含有數(shù)據(jù)，有就填充。
onLoad: function (options) { var that = this wx.getStorage({ key: 'userName', success: function(res) { that.setData({ userName: res.data }) }, }) wx.getStorage({ key: 'passWord', success: function (res) { console.log(res.data) that.setData({ passWord: res.data }) }, }) },以上就是完整的表單登陸加儲(chǔ)存。
希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
