怎样购买起名软件自己做网站/山东济南最新消息
-
实现目标:在进入”用户中心“页面之前,一定要获取用户信息;若没有用户信息,则一定要进行登录以获得用户名、密码等信息,使得“用户中心”能显示一系列用户信息。
-
各个页面:
登录页面:
输入信息前:
输入信息后:
-----------------------------------------------------------
用户中心:
- 具体实现
-1.app.js中设置userinfo数据为null
appData:{userinfo:null,}
-2. user.js中判断userinfo是否为null,若为null,则跳转到“登录页面”
onLoad: function (options) {if(app.appData.userinfo==null){wx.redirectTo({ url: "../login/login" })//此时没有返回按钮}
-3.在“登录”页面login.wxml设置
用户名input输入框
密码inout输入框
以及button登录按钮
///并通过分别给用户名、密码绑定事件bindinput
///来获取输入框的数据
//通过给按钮绑定事件bindtap
///将页面跳转到”用户中心“页面,并把数据传给app.userinfo全局数据
<view><view><input class="input1" placeholder="{{input1Test}}" bindinput="usernameInput"/></view><!-- 如何获取?需要我们给输入框绑定一个事件 --><view><input style="felx-grow:1" class="input2" placeholder="{{input2Test}} " password="true" bindinput="passwordInput"/></view><view><button type="primary" bindtap="loginBtnClick" class="btn"> 登录 </button></view></view>
-4.在login.js具体实现bindinput和bindtap事件
//通过event.detail.value获取输入框的值
//通过this.setData来讲输入框的值赋值给username和password
data: {input1Test:"请输入用户名",input2Test: "请输入密码",//定义username:null,password:null,//如何获取?需要我们给输入框绑定一个事件},//定义2个方法usernameInput:function(event){//打印事件 console.log(event);this.setData({username:event.detail.value})//将输入框的用户名传入username变量},//我们在输入的时候数据就有值了appData//我们需要在点登录按钮时,要把数值赋给userinfopasswordInput:function(event){//console.log(event);this.setData({password: event.detail.value})}
//再将username和password传给app.userinfo
loginBtnClick:function(){//登陆的时候信息保存到app里面//1.点登陆的时候 获取输入框中获取的数据app.appData.userinfo={username:this.data.username,password:this.data.password}wx.switchTab({url:'../user/user'})//把用户账号密码提交到服务器里面 验证返回true 存在且相等 ,才返回到用户页面,省略这个步骤},
-5.将app.userinfo信息传给user.username
onLoad: function (options) {if(app.appData.userinfo==null){//若userinfo为空,则要跳转到登录页面/// wx.navigateTo({url:"../login/login"}) //不能用这个 因为跳转到没登陆就登陆页面,还能返回到用户界面wx.redirectTo({ url: "../login/login" })//因为跳转到没登陆就登陆页面,,此时没有返回按钮}else{this.setData({username:app.appData.userinfo.username})}},