实例内容
- 登陆界面
- 处理登陆表单数据
- 处理登陆表单数据(异步)
- 清除本地数据
登录界面:
在app.json
中添加登陆页面pages/login/login
,并设置为入口。
修改登陆样式login.wxss
看下样式:
form相关属性:
类型 | 说明 |
---|---|
这里用到了bindsubmit,用于处理提交的表单数据。
input相关属性
类型 | 默认值 | 说明 |
---|---|---|
此Demo中将button的formType设置为submit用于激活表单提交事件。
实例二: 处理登陆表单数据
修改login.js
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
这个小实例,会在登陆的时候,将登陆信息存到本地存储,当下次登陆时,如果本地存储中有相应信息,则直接填写上。
效果(再一次运行后,自动填写上了信息):
实例三: 处理登陆表单数据(异步)
这里采用异步的方式存放数据。
修改一下login.js
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});
}
});
},onUnload:function(){
// 页面关闭
}
})
wx.setStorage(OBJECT)
类型 | 必填 | 说明 |
---|---|---|
wx.getStorage(OBJECT)
类型 | 必填 | 说明 |
---|---|---|
实例四: 清除本地数据
这里就不详细写了,直接介绍一下这两个清除本地数据的方法。
wx.clearStorage()
wx.clearStorageSync()
直接执行即可实现。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
原文链接:https://www.f2er.com/weapp/42619.html