微信小程式簡單的form表單本地儲存資料
阿新 • • 發佈:2019-01-02
效果圖:
主要利用小程式的getStorage來實現非同步本地儲存。
小程式目錄結構如下:
新建專案前,為了簡化操作可直接右鍵新建目錄,這樣建出來的檔案會直接寫在app.json中,無需手動新增。
login.wxml程式碼:
<!--pages/login/login.wxml--> <view class='container'> <form bindsubmit='submit'> <view class='row'> <text>姓名:</text> <input type='text' name='userName' placeholder='請輸入姓名' value='{{userName}}'/> </view> <view class='row'> <text>密碼:</text> <input type='password' name='passWord' placeholder='請輸入密碼' 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; }
重點login.js來了:
// pages/login/login.js Page({ /** * 頁面的初始資料 */ data: { userName:'', passWord:'' }, /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { }, /** * 生命週期函式--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命週期函式--監聽頁面顯示 */ onShow: function () { }, /** * 生命週期函式--監聽頁面隱藏 */ onHide: function () { }, /** * 生命週期函式--監聽頁面解除安裝 */ onUnload: function () { }, /** * 頁面相關事件處理函式--監聽使用者下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函式 */ onReachBottom: function () { }, /** * 使用者點選右上角分享 */ onShareAppMessage: function () { } })
點選登陸時,觸發submit函式,如下:
submit:function(e){
console.log(e.detail.value);
//表單資料
var objData = e.detail.value;
if (objData.userName && objData.passWord){
//非同步方式儲存表單資料
wx.setStorage({
key: 'userName',
data: objData.userName,
})
wx.setStorage({
key: 'passWord',
data: objData.passWord,
})
wx.navigateTo({
url: '../detail/detail',
})
}
},
儲存好資料後,下次再開啟該頁面,先判斷是否含有資料,有就填充。
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 })
},
})
},
以上就是完整的表單登陸加儲存。