版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yanxiaosa/article/details/73199254
作者:燕歆波
导读:昨天早上来的早,闲来无事,就写了微信小程序的登录demo,下面来看一下;
主要步骤
1. 在wxml中编写布局,输入用户名和输入密码,两个输入框,垂直排列
2. 在两个输入框下面有一个登录按钮,样式自定义
3. 在js中的data中定义两个变量username和password,初始值自定义
4. 给两个输入框监听的方法,不断监听输入的内容并且给username和password赋值
5. 编写登录按钮点击时的方法,我们要获取用户输入的用户名和用户密码,判断信息是否正确,还要设置userInfo,因为登陆成功后,我们直接从userInfo中获取用户信息。
6. 判断用户信息正确后,跳转页面。
编写布局
//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>
监听输入框的改变,不断给变量赋值输入的内容
//定义两个变量用来接收输入的用户名和密码
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
})
},
实现点击按钮登录
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'
})
}
}
这里提一个知识点,就是,navigateTo,redirectTo和navigateBack的区别:
wx.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
wx.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。
wx.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
跳转后,我们在user页面打印出当前的用户名!
首先在js中定义变量username,
data:{
username:null
},
在加载页面时获取用户信息:
onLoad:function(options){
if (app.globalData.userInfo == null){
wx.showToast({
title: '获取信息失败',
})
}else{
this.setData({
username: app.globalData.userInfo.username
})
}
}
在页面上显示用户信息:
<view class="container">
<view>{{username}}</view>
</view>
- 1
- 2
- 3
这样,就实现了登陆跳转!
可是每次刷新,都要重新登陆,所以,我们来解决这个问题,刚才,我们在用户登录时,缓存了用户信息,那么,我们可以再页面加载的时候,判断是否有用户信息,如果有就直接登录,如果没有在登录:
在onLoad方法中实现这些:
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()
},