微信小程式: 簡易form、本地存儲

實例內容

登陸介面

處理登陸表單資料

處理登陸表單資料（非同步）

清除本機資料

實例一: 登陸介面

在app.json中新增登陸頁面pages/login/login，並設定為入口。

儲存後，自動產生相關檔案（挺方便的）。

修改視圖檔login.wxml

姓名：text> view> < text>密碼：text> view> 登陸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;}看下樣式：

#

form相關屬性：

屬性名稱類型說明report-submit Boolean 是否回傳formId用於傳送範本訊息bindsubmit EventHandle 攜帶form中的資料觸發submit事件，event.detail = { value : {"name ":"value"} , formId:"" } bindreset EventHandle 表單重置時會觸發reset事件這裡用到了bindsubmit ，用於處理提交的表單資料。
input 相關屬性

屬性名稱類型預設值說明value String  輸入框的內容type String text input的類型，有效值：text,number,idcard,digit,time,date password Boolean false 是否是密碼類型placeholder String  輸入框為空時佔位符placeholder-style String  指定placeholder的樣式placeholder-class String input-placeholder 指定placeholder的樣式類別disabled Boolean false 是否停用maxlength Number 140 最大輸入長度，設定為0時不的長度限制最大長度auto-focus Boolean false 自動聚焦，拉起鍵盤。頁面中只能有一個input設定auto-focus屬性focus Boolean false 使得input取得焦點bindchange EventHandle  輸入框失去焦點時，觸發bindchange事件，event.detail={value:value} bindinput EventHandle  除了date/time類型外的輸入框，當鍵盤輸入時，觸發input事件，event.detail={value:value}，處理函數可以直接return一個字串，將取代輸入框的內容。 bindfocus EventHandle  輸入框聚焦時觸發，event.detail = {value:value} bindblur EventHandle  輸入框失去焦點時觸發，event.detail = {value:value}button 相關屬性

屬性名類型名稱類型預設值說明size String default 有效值default, mini type String default 按鈕的樣式類型，有效值primary, default, warn plain Boolean false 按鈕是否鏤空，背景色透明disabled Boolean false 是否停用String String有效值：submit, reset，用於form元件，點選分別會觸發submit/reset事件hover-class String button-hover 指定按鈕按下去的樣式類別。當hover-class="none"時，沒有點擊態效果此Demo中將button的formType設定為submit用於啟動表單提交事件。
實例二: 處理登陸表單資料

修改login.js
// pages/login/login.jsPage({ data:{ userName:'', userPassword:'', }, formSubmit :function(e){ console.log(e.detail.value);//格式Object {userName: "user", userPassword: "password"} //取得表單資料var objData = e.detail.value; if( objData.userName && objData.userPassword){ // 同步方式儲存表單資料wx.setStorageSync('userName', objData.userName); wx.setStorageSync('userPassword', objData.userPassword); //跳轉到成功頁面wxx .navigateTo({ url: '../index/index' }) } }, //載入完後，處理事件  // 如果有本地數據，則直接顯示onLoad:function(options){ //取得本地資料var userName = wx.getStorageSync('userName'); var userPassword = wx.getStorageSync('userPassword'); console.log(userName); console.log(userPassword); if(userName){ this.setData({userName: userName }); } if(userPassword){ this.setData({userPassword: userPassword}); } }, onReady:function(){ // 頁面渲染完成}, onShow:function(){ // 頁面顯示}, onHide: function(){ // 頁面隱藏}, onUnload:function(){ // 頁面關閉}})這裡使用到了wx.getStorageSync和wx.setStorageSync，這裡說一下，上面這兩個方法類似於HTML5的本地存儲，屬於同步儲存方式。
這兩個方法，使用很簡單，列下參數：
wx.setStorageSync(KEY,DATA)
屬性名稱類型必填說明key String 是本地快取中的指定的key data Object/String是需要儲存的內容wx.getStorageSync
屬性名稱類型必填說明KEY String 是本機快取中的指定的key修改一下login.wxml
姓名：text> view> < text>密碼：text> view>這個小實例，會在登陸的時候，將登陸資訊存到本地存儲，當下次登陸時，如果本地存儲中有相應信息，則直接填寫上。
效果（再一次運行後，自動填入上了資訊）：

實例三: 處理登陸表單資料（非同步）

這裡採用非同步的方式存放資料。
修改一下login.js
// pages/login/login.jsPage({ data:{ userName:'', userPassword:'', }, formSubmit:function(e){ console.log(e. detail.value);//格式Object {userName: "user", userPassword: "password"} //取得表單資料var objData = e.detail.value; if(objData.userName && objData.userPassword){ // 同步方式儲存表單資料wx.setStorage({ key:'userName', data:objData.userName }); wx.setStorage({ key:'userPassword', data:objData.userPassword }); //跳到成功頁面wx .navigateTo({ url: '../index/index' }) } }, //載入完後，處理事件  // 如果有本地數據，則直接顯示onLoad:function(options){ var that = this; / /取得本地資料wx.getStorage({ key: 'userName', success: function(res){ console.log(res.data); that.setData({userName: res.data}); } }); wx. getStorage({ key: 'userPassword', success: function(res){ console.log(res.data); that.setData({userPassword: res.data}); } }); }, onReady:function(){ // 頁面渲染完成}, onShow:function(){ // 頁面顯示}, onHide:function(){ // 頁面隱藏}, onUnload:function(){ // 頁面關閉}})wx.setStorage(OBJECT)
屬性名稱類型必填說明key String 是本地快取中的指定的key data Object/String 是需要儲存的內容success Function 否介面呼叫成功的回呼函數fail Function 否介面呼叫失敗的回呼函數complete Function 否介面呼叫結束的回呼函數（呼叫成功、失敗都會執行）wx.getStorage(OBJECT)
屬性名類型必填說明key String 是本機快取中的指定的key success Function 是介面呼叫的回呼函數,res = { data: key對應的內容} fail Function 否介面呼叫失敗的回呼函數complete Function 否介面呼叫結束的回呼函數（呼叫成功、失敗都會執行）實例四: 清除本機資料

這裡就不詳細寫了，直接介紹一下這兩個清除本地資料的方法。
wx.clearStorage()
wx.clearStorageSync()
直接執行即可實現。

更多微信小程式: 簡易form、本地儲存相關文章請關注PHP中文網站！

#