例項內容

• 登陸介面
• 處理登陸表單資料
• 處理登陸表單資料（非同步）
• 清除本地資料

例項一: 登陸介面

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

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

修改檢視檔案login.wxml

<!--pages/login/login.wxml-->
<view class="container">
    <form bindsubmit="formSubmit">
        <view class="row">
            <text
 
>姓 名：</text>
            <input type="text" name="userName" placeholder="請輸入使用者名稱" />
        </view>
        <view class="row">
            <text>密 碼：</text>
            <input type="password" name="userPassword" placeholder="請輸入密碼" />
        </view>
        <view
 
 class="row">
            <button type="primary" form-type="submit">登陸</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相關屬性：

這裡用到了bindsubmit ，用於處理提交的表單資料。

input 相關屬性

button 相關屬性

此Demo中將button的formType設定為submit用於啟用表單提交事件。

例項二: 處理登陸表單資料

修改login.js

// pages/login/login.js
Page({
  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);

      //跳轉到成功頁面
      wx.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)

wx.getStorageSync

修改一下login.wxml

        <view class="row">
            <text>姓 名：</text>
            <input type="text" name="userName" placeholder="請輸入使用者名稱" value="{{userName}}" />
        </view>
        <view class="row">
            <text>密 碼：</text>
            <input type="password" name="userPassword" placeholder="請輸入密碼" value="{{userPassword}}" />
        </view>

這個小例項，會在登陸的時候，將登陸資訊存到本地儲存，當下次登陸時，如果本地儲存中有相應資訊，則直接填寫上。

效果（再一次執行後，自動填寫上了資訊）：

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

這裡採用非同步的方式存放資料。

修改一下login.js

// pages/login/login.js
Page({
  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)

wx.getStorage(OBJECT)

例項四: 清除本地資料

這裡就不詳細寫了，直接介紹一下這兩個清除本地資料的方法。

wx.clearStorage()

wx.clearStorageSync()

直接執行即可實現。