微信小程序中本地存儲及登錄頁面處理的實例

這篇文章主要介紹了微信小程序中本地存儲及登錄頁面處理的實例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

登錄界面：

在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()

直接執行即可實現。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序中本地存儲及登錄頁面處理的實例”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!