微信小程序本地存儲(chǔ)及登錄頁面處理實(shí)例詳解

更新時(shí)間：2017年01月11日 15:27:28 投稿：lqh

這篇文章主要介紹了微信小程序本地存儲(chǔ)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下

實(shí)例內(nèi)容

登陸界面
處理登陸表單數(shù)據(jù)
處理登陸表單數(shù)據(jù)（異步）
清除本地?cái)?shù)據(jù)

登錄界面：

在app.json中添加登陸頁面pages/login/login，并設(shè)置為入口。

保存后，自動(dòng)生成相關(guān)文件（挺方便的）。

修改視圖文件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相關(guān)屬性：

屬性名	類型	說明
report-submit	Boolean	是否返回formId用于發(fā)送模板消息
bindsubmit	EventHandle	攜帶form中的數(shù)據(jù)觸發(fā)submit事件，event.detail = { value : {"name":"value"} , formId:"" }
bindreset	EventHandle	表單重置時(shí)會(huì)觸發(fā)reset事件

這里用到了bindsubmit ，用于處理提交的表單數(shù)據(jù)。

input 相關(guān)屬性

屬性名	類型	默認(rèn)值	說明
value	String		輸入框的內(nèi)容
type	String	text	input的類型，有效值：text,number,idcard,digit,time,date
password	Boolean	false	是否是密碼類型
placeholder	String		輸入框?yàn)榭諘r(shí)占位符
placeholder-style	String		指定placeholder的樣式
placeholder-class	String	input-placeholder	指定placeholder的樣式類
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大輸入長度，設(shè)置為0的時(shí)候不限制最大長度
auto-focus	Boolean	false	自動(dòng)聚焦，拉起鍵盤。頁面中只能有一個(gè)input設(shè)置auto-focus屬性
focus	Boolean	false	使得input獲取焦點(diǎn)
bindchange	EventHandle		輸入框失去焦點(diǎn)時(shí)，觸發(fā)bindchange事件，event.detail={value:value}
bindinput	EventHandle		除了date/time類型外的輸入框，當(dāng)鍵盤輸入時(shí)，觸發(fā)input事件，event.detail={value:value}，處理函數(shù)可以直接return一個(gè)字符串，將替換輸入框的內(nèi)容。
bindfocus	EventHandle		輸入框聚焦時(shí)觸發(fā)，event.detail = {value:value}
bindblur	EventHandle		輸入框失去焦點(diǎn)時(shí)觸發(fā)，event.detail = {value:value}

button 相關(guān)屬性

屬性名	類型	默認(rèn)值	說明
size	String	default	有效值default, mini
type	String	default	按鈕的樣式類型，有效值primary, default, warn
plain	Boolean	false	按鈕是否鏤空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名稱前是否帶 loading 圖標(biāo)
formType	String	無	有效值：submit, reset，用于form組件，點(diǎn)擊分別會(huì)觸發(fā)submit/reset事件
hover-class	String	button-hover	指定按鈕按下去的樣式類。當(dāng)hover-class="none"時(shí)，沒有點(diǎn)擊態(tài)效果

此Demo中將button的formType設(shè)置為submit用于激活表單提交事件。

實(shí)例二: 處理登陸表單數(shù)據(jù)

修改login.js

// pages/login/login.js
Page({
 data:{
  userName:'',
  userPassword:'',
 },

 formSubmit:function(e){
  console.log(e.detail.value);//格式 Object {userName: "user", userPassword: "password"}

  //獲得表單數(shù)據(jù)
  var objData = e.detail.value;

  if(objData.userName && objData.userPassword){
   // 同步方式存儲(chǔ)表單數(shù)據(jù)
   wx.setStorageSync('userName', objData.userName);
   wx.setStorageSync('userPassword', objData.userPassword);

   //跳轉(zhuǎn)到成功頁面
   wx.navigateTo({
    url: '../index/index'
   })
  }
 },

 //加載完后，處理事件 
 // 如果有本地?cái)?shù)據(jù)，則直接顯示
 onLoad:function(options){
  //獲取本地?cái)?shù)據(jù)
  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(){
  // 頁面關(guān)閉
 }
})

這里使用到了wx.getStorageSync和wx.setStorageSync，這里說一下，上面這兩個(gè)方法類似于HTML5的本地存儲(chǔ)，屬于同步存儲(chǔ)方式。

這兩個(gè)方法，使用很簡單，列下參數(shù)：

wx.setStorageSync(KEY,DATA)

屬性名	類型	必填	說明
key	String	是	本地緩存中的指定的key
data	Object/String	是	需要存儲(chǔ)的內(nèi)容

wx.getStorageSync

屬性名	類型	必填	說明
KEY	String	是	本地緩存中的指定的key

修改一下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>

這個(gè)小實(shí)例，會(huì)在登陸的時(shí)候，將登陸信息存到本地存儲(chǔ)，當(dāng)下次登陸時(shí)，如果本地存儲(chǔ)中有相應(yīng)信息，則直接填寫上。

效果（再一次運(yùn)行后，自動(dòng)填寫上了信息）：

實(shí)例三: 處理登陸表單數(shù)據(jù)（異步）

這里采用異步的方式存放數(shù)據(jù)。

修改一下login.js

// pages/login/login.js
Page({
 data:{
  userName:'',
  userPassword:'',
 },

 formSubmit:function(e){
  console.log(e.detail.value);//格式 Object {userName: "user", userPassword: "password"}

  //獲得表單數(shù)據(jù)
  var objData = e.detail.value;

  if(objData.userName && objData.userPassword){
   // 同步方式存儲(chǔ)表單數(shù)據(jù)
   wx.setStorage({
    key:'userName', 
    data:objData.userName
   });
   wx.setStorage({
    key:'userPassword', 
    data:objData.userPassword
   });

   //跳轉(zhuǎn)到成功頁面
   wx.navigateTo({
    url: '../index/index'
   })
  }
 },

 //加載完后，處理事件 
 // 如果有本地?cái)?shù)據(jù)，則直接顯示
 onLoad:function(options){
  var that = this;
  //獲取本地?cái)?shù)據(jù)
  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(){
  // 頁面關(guān)閉
 }
})

wx.setStorage(OBJECT)

屬性名	類型	必填	說明
key	String	是	本地緩存中的指定的 key
data	Object/String	是	需要存儲(chǔ)的內(nèi)容
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

wx.getStorage(OBJECT)

屬性名	類型	必填	說明
key	String	是	本地緩存中的指定的 key
success	Function	是	接口調(diào)用的回調(diào)函數(shù),res = {data: key對應(yīng)的內(nèi)容}
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）