【移動應(yīng)用開發(fā)技術(shù)】微信小程序中本地存儲及登錄頁面處理的示例分析

在下給大家分享一下微信小程序中本地存儲及登錄頁面處理的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！登錄界面：在app.json中添加登陸頁面pages/login/login，并設(shè)置為入口。保存后，自動生成相關(guān)文件（挺方便的）。修改視圖文件login.wxml<!s/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)屬性：這里用到了bindsubmit，用于處理提交的表單數(shù)據(jù)。input相關(guān)屬性button相關(guān)屬性此Demo中將button的formType設(shè)置為submit用于激活表單提交事件。實例二:處理登陸表單數(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){

//

同步方式存儲表單數(shù)據(jù)

wx.setStorageSync('userName',

objData.userName);

wx.setStorageSync('userPassword',

objData.userPassword);

//跳轉(zhuǎn)到成功頁面

wx.navigateTo({

url:

'../index/index'

})

}

},

//加載完后，處理事件

//

如果有本地數(shù)據(jù)，則直接顯示

onLoad:function(options){

//獲取本地數(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，這里說一下，上面這兩個方法類似于HTML5的本地存儲，屬于同步存儲方式。這兩個方法，使用很簡單，列下參數(shù)：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>這個小實例，會在登陸的時候，將登陸信息存到本地存儲，當(dāng)下次登陸時，如果本地存儲中有相應(yīng)信息，則直接填寫上。效果（再一次運行后，自動填寫上了信息）：實例三:處理登陸表單數(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){

//

同步方式存儲表單數(shù)據(jù)

wx.setStorage({

key:'userName',

data:objData.userName

});

wx.setStorage({

key:'userPassword',

data:objData.userPassword

});

//跳轉(zhuǎn)到成功頁面

wx.navigateTo({

url:

'../index/index'

})

}

},

//加載完后，處理事件

//

如果有本地數(shù)據(jù)，則直接顯示

onLoad:function(options){

var

that

=

this;

//獲取本地數(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)屬性名類型必填說明keyString是本地緩存中的指定的keydataObject/Stri