实例内容登陆界面处理登陆表单数据处理登陆表单数据(异步)清除本地数据登录界面:在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()
直接执行即可实现。
最新评论