實例內容
登陸介面
處理登陸表單資料
處理登陸表單資料（非同步）
清除本機資料
實例一: 登陸介面
在app.json中新增登陸頁面pages/login/login，並設定為入口。
儲存後，自動產生相關檔案（挺方便的）。
修改視圖檔login.wxml
#
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中文網站！
#
