案例3
知识点:
跳转页面时,
wx.navigateTo({url:”…/login/login”})
账号密码赋值给APP数据:
this.setDat({username:app.appData.userinfo.username})
用户名和密码验证的过程:
loginBtnCllick:function(){
App.appData.userinfo={username:this.data.username,passworda:this.data.password}
wx.redirectTol({url:”…/user/user”})
}
总结:
1.运用到配置页面,window信息以及tabBar,每个页面有自己的配置覆盖全局的配置
2.users生命周期
在onunload里判断当前用户是否存在,若不存在跳转到登录页面,若存在,在当前页面设置值
onlond:function(options){
If(app.appData.useinfonull){
wx.redirectTol({url:”…/login/login”})
}else{
this.setDatal({username:app.appData.userinfo.username})
}
}
3.事件的绑定
登录页面按钮绑定了点击的事件,
<button class = “login-btn” bindtap=“loginBtnClick”>登录</button>
在输入框框里面绑定了input事件,
<input style = “flex-grow:1” password=“true” bindinput=“passwordInput”/>
Input事件触发会获得输入框中的数据,并给username赋值
usernameInput:funtion(event){this.setData({username.event.detail.value})}
登录以后重新跳回用户中心页面
loginBtnCllick:function(){
App.appData.userinfo={username:this.data.username,passworda:this.data.password}
wx.redirectTol({url:”…/user/user”})
}
之后用户触发onLoad
onlond:function(options){
If(app.appData.useinfonull){
wx.redirectTol({url:”…/login/login”})
}else{
this.setDatal({username:app.appData.userinfo.username})
}
}
之后用户名将正常显示
小结:通过该案例,知道微信小程序如何进行页面跳转,并知道如何通过编程语言将输入的账号密码数据传到系统数据中,并准确的显示在用户页面上。