【移动应用开发技术】微信小程序中本地存储及登录页面处理的示例分析

【移动应用开发技术】微信小程序中本地存储及登录页面处理的示例分析

在下给大家分享一下微信小程序中本地存储及登录页面处理的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！登录界面：在app.json中添加登陆页面pages/login/login，并设置为入口。保存后，自动生成相关文件（挺方便的）。修改视图文件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相关属性：这里用到了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)属性名类型必填说明keyString是本地缓存中的指定的keydataObject/Stri