加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

微信小程序 本地存储及登录页面处理实例详解

发布时间:2020-12-14 20:22:14 所属栏目:资源 来源:网络整理
导读:实例内容 登陆界面 处理登陆表单数据 处理登陆表单数据(异步) 清除本地数据 登录界面: 在 app.json 中添加登陆页面 pages/login/login ,并设置为入口。 保存后,自动生成相关文件(挺方便的)。 修改视图文件 login.wxml 姓 名: 密 码: 修改登陆样式 l

这里用到了bindsubmit,用于处理提交的表单数据。

input相关属性

button相关属性

属性名

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

直接执行即可实现。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

实例内容

  • 登陆界面
  • 处理登陆表单数据
  • 处理登陆表单数据(异步)
  • 清除本地数据

登录界面:

app.json中添加登陆页面pages/login/login,并设置为入口。

保存后,自动生成相关文件(挺方便的)。

修改视图文件login.wxml

姓 名: 密 码:

修改登陆样式login.wxss

看下样式:

form相关属性:

属性名

类型 说明
类型 默认值 说明
类型 必填 说明
类型 必填 说明
类型 必填 说明
类型 必填 说明
    推荐文章
      热点阅读