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

实例内容

 登陆界面
 处理登陆表单数据
 处理登陆表单数据（异步）
 清除本地数据
登录界面：
在

app.json

中添加登陆页面

pages/login/login

，并设置为入口。

保存后，自动生成相关文件（挺方便的）。

修改视图文件

login.wxml

 !--pages/login/login.wxml-- 
 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相关属性：



属性名类型说明report-submitBoolean是否返回formId用于发送模板消息bindsubmitEventHandle携带form中的数据触发submit事件，event.detail = { value : {"name":"value"} , formId:"" }bindresetEventHandle表单重置时会触发reset事件
这里用到了bindsubmit ，用于处理提交的表单数据。
input 相关属性




属性名类型默认值说明valueString
输入框的内容typeStringtextinput的类型，有效值：text,number,idcard,digit,time,datepasswordBooleanfalse是否是密码类型placeholderString
输入框为空时占位符placeholder-styleString
指定placeholder的样式placeholder-classStringinput-placeholder指定placeholder的样式类disabledBooleanfalse是否禁用maxlengthNumber140最大输入长度，设置为0的时候不限制最大长度auto-focusBooleanfalse自动聚焦，拉起键盘。页面中只能有一个input设置auto-focus属性focusBooleanfalse使得input获取焦点bindchangeEventHandle
输入框失去焦点时，触发bindchange事件，event.detail={value:value}bindinputEventHandle
除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail={value:value}，处理函数可以直接return一个字符串，将替换输入框的内容。bindfocusEventHandle
输入框聚焦时触发，event.detail = {value:value}bindblurEventHandle
输入框失去焦点时触发，event.detail = {value:value}
button 相关属性




属性名类型默认值说明sizeStringdefault有效值default, minitypeStringdefault按钮的样式类型，有效值primary, default, warnplainBooleanfalse按钮是否镂空，背景色透明disabledBooleanfalse是否禁用loadingBooleanfalse名称前是否带 loading 图标formTypeString无有效值：submit, reset，用于form组件，点击分别会触发submit/reset事件hover-classStringbutton-hover指定按钮按下去的样式类。当hover- 时，没有点击态效果
此Demo中将button的formType设置为submit用于激活表单提交事件。
实例二: 处理登陆表单数据
修改login.js
// pages/login/login.js
Page({
 data:{
 userName: #39; #39;,
 userPassword: #39; #39;,
 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( #39;userName #39;, objData.userName);
 wx.setStorageSync( #39;userPassword #39;, objData.userPassword);
 //跳转到成功页面
 wx.navigateTo({
 url: #39;../index/index #39;
 //加载完后，处理事件 
 // 如果有本地数据，则直接显示
 onLoad:function(options){
 //获取本地数据
 var userName = wx.getStorageSync( #39;userName #39;);
 var userPassword = wx.getStorageSync( #39;userPassword #39;);
 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)




属性名类型必填说明keyString是本地缓存中的指定的keydataObject/String是需要存储的内容
wx.getStorageSync




属性名类型必填说明KEYString是本地缓存中的指定的key
修改一下login.wxml
 view >
这个小实例，会在登陆的时候，将登陆信息存到本地存储，当下次登陆时，如果本地存储中有相应信息，则直接填写上。
效果（再一次运行后，自动填写上了信息）：


实例三: 处理登陆表单数据（异步）
这里采用异步的方式存放数据。
修改一下
login.js
// pages/login/login.js
Page({
 data:{
 userName: #39; #39;,
 userPassword: #39; #39;,
 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: #39;userName #39;, 
 data:objData.userName
 wx.setStorage({
 key: #39;userPassword #39;, 
 data:objData.userPassword
 //跳转到成功页面
 wx.navigateTo({
 url: #39;../index/index #39;
 //加载完后，处理事件 
 // 如果有本地数据，则直接显示
 onLoad:function(options){
 var that = this;
 //获取本地数据
 wx.getStorage({
 key: #39;userName #39;,
 success: function(res){
 console.log(res.data);
 that.setData({userName: res.data});
 wx.getStorage({
 key: #39;userPassword #39;,
 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/String是需要存储的内容successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）wx.getStorage(OBJECT)




属性名类型必填说明keyString是本地缓存中的指定的 keysuccessFunction是接口调用的回调函数,res = {data: key对应的内容}failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）
实例四: 清除本地数据
这里就不详细写了，直接介绍一下这两个清除本地数据的方法。
wx.clearStorage()
wx.clearStorageSync()
直接执行即可实现。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:
微信小程序（应用号）简单实例应用及实例详解
微信小程序 实战小程序实例
微信小程序 for 循环详解
微信小程序 WXML、WXSS 和JS介绍及详解
微信小程序 数据访问实例详解
微信小程序 参数传递详解
微信小程序 wx:key详细介绍
微信小程序 (十七)input 组件详细介绍
微信小程序 实现列表刷新的实例详解
微信小程序 （三）tabBar底部导航详细介绍
微信小程序 获取微信OpenId详解及实例代码
以上就是微信小程序 本地存储及登录页面处理实例详解 的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！