E企盈小程序开发-热线：4006-838-530实例内容登陆界面处理登陆表单数据处理登陆表单数据（异步）清除本地数据登录界面：在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开通芒果小程序电话:4006-838-530.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否接口调用失开通牛仔裤小程序电话:4006-838-530败的回调函数开通毛巾被小程序电话:4006-838-530completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）wx.getStorage(OBJECT)
keyString是本地缓存中的指定的 keysuccessFunction是接口调用的回调函数,res = {data: key对应的内容}failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）实例四: 清除本地数据这里就不详细写了，直接介绍一下这两个清除本地数据的方法。wx.clearStorage()wx.clearStorageSync()直接执行即可实现。
最新评论