Copyright statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission. https://blog.csdn.net/yanxiaosa/article/details/73199254
Author: Yan Xinbo
Introduction: I came early yesterday morning and had nothing to do, so I wrote the login demo of the WeChat applet. Let's take a look;
The main steps
1. 在wxml中编写布局,输入用户名和输入密码,两个输入框，垂直排列
2. 在两个输入框下面有一个登录按钮,样式自定义
3. 在js中的data中定义两个变量username和password,初始值自定义
4. 给两个输入框监听的方法,不断监听输入的内容并且给username和password赋值
5. 编写登录按钮点击时的方法,我们要获取用户输入的用户名和用户密码，判断信息是否正确,还要设置userInfo,因为登陆成功后，我们直接从userInfo中获取用户信息。
6. 判断用户信息正确后,跳转页面。
write layout
//container为竖向布局
<view class="container" >
//container_col横向布局,存放输入用户名
<view class="container_col">
//输入框前面的提示文字
<text style="text-align:center; margin-right:10px;">用户名:</text>
//输入框
<input bindinput="userName" placeholder="{{username}}" />
</view>
//container_col横向布局,存放输入密码
<view class="container_col">
<text style="text-align:center; margin-right:30px;">密码:</text>
<input bindinput="password" password="true" type="password" placeholder="{{password}}" />
</view>
//登录按钮,绑定btnLoginClick方法,实现跳转页面,和信息判断
<button bindtap="btnLoginClick" style="width:95%; height:40px; margin-top:40px;" plain="true" hover-class="button-hover" size="80%" type="primary" form-type="submit">登录</button>
</view>
Monitor the change of the input box, and constantly assign the input content to the variable
//定义两个变量用来接收输入的用户名和密码
data: {
。。。,
username:'请输入用户名',
password:'请输入密码'
},
//监听方法,输入框已经绑定了监听的方法bindinput,注意为小写,因为还有一个方法是bindInput
userName:function(event){
console.log(event.detail.value)
this.setData({
username: event.detail.value
})
},
password:function(e){
console.log(e.detail.value)
this.setData({
password:e.detail.value
})
},Implement click button login
btnLoginClick:function(e){
//获取当前已经赋值的用户名和密码
var name = this.data.username;
var pass = this.data.password;
//此处定死了用户名和密码,如果不正确,给出提示
if(name != 'admin' || pass != 111111){
wx.showToast({
title: '不存在此用户',
duration:2000
})
}else{//信息正确弹出检测账户的提示框
wx.showLoading({
title: '检测中',
})
//信息正确,给userInfo赋值
app.globalData.userInfo = { username: this.data.username, password: this.data.password }
//将用户名和密码缓存下来,留着实现不用重复登录
wx.setStorageSync("username",this.data.username)
wx.setStorageSync("password",this.data.password)
//跳转页面,并且关闭当前页面
wx.redirectTo({
url: '../user/user'
})
}
}Here is a knowledge point, that is, the difference between navigateTo, redirectTo and navigateBack:
wx.navigateTo(OBJECT)
保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
wx.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。
wx.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。After the jump, we print out the current username on the user page!
First define the variable username in js,
data:{
username:null
},Get user info when the page is loaded:
onLoad:function(options){
if (app.globalData.userInfo == null){
wx.showToast({
title: '获取信息失败',
})
}else{
this.setData({
username: app.globalData.userInfo.username
})
}
}Display user information on the page:
<view class="container">
<view>{{username}}</view>
</view>- 1
- 2
- 3
In this way, the login jump is realized!
But every time you refresh, you have to log in again, so let's solve this problem. Just now, we cached user information when the user logged in, then we can judge whether there is user information when the page is loaded, and if so, then Login directly, if not logged in:
implement these in the onLoad method:
onLoad:function(options){
//获取缓存的信息
var usernames = wx.getStorageSync("username")
var passwords = wx.getStorageSync("password")
//判断用户名是否为null,如果为null,默认显示'请输入用户名'
if(usernames == null){
usernames = '请输入用户名'
}
//判断密码是否为null,如果为null,默认显示'请输入密码'
if(passwords == null){
passwords = '请输入密码'
}
this.setData({
username:usernames,
password:passwords
})
//调用btnLoginClick方法,因为此方法中就是验证用户信息正确和 // 实现登录的代码
this.btnLoginClick()
},