E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

实例内容登陆界面处理登陆表单数据处理登陆表单数据(异步)清除本地数据登录界面:在app.json中添加登陆页面pages/login/login,并设置为入口。保存后,自动生成相关文件(挺方便的)。修改视图文件login.wxml?1234567891011121314151617!–pages/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?1234567891011121314151617181920212223242526272829/* 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 相关属性实例三: 处理登陆表单数据(异步)这里采用异步的方式存放数据。修改一下login.js?12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364// 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/String是需要存储的内容successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)wx.getStorage(OBJECT)属性名类型必填说明keyString是本地缓存中的指定的 keysuccessFunction是接口调用的回调函数,res = {data: key对应的内容}failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)实例四: 清除本地数据这里就不详细写了,直接介绍一下这两个清除本地数据的方法。wx.clearStorage()wx.clearStorageSync()直接执行即可实现。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序本地存储及登录页面处理实例详解
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏