你们好，最近小榜发现有诸多的小伙伴们对于小程序登录的实现，小程序登录这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、打开微信开发者工具，在项目pages中新建三个页面，分别为mypage、login和user，在app.json中注册这三个页面，将mypage设为第一页面，同时添加底部tabBar，app.josn代码如下;
2、{
3、"pages": [
4、"pages/mypage/mypage",
5、"pages/index/index",
6、"pages/logs/logs",
7、"pages/login/login",
8、"pages/user/user"
9、],
10、"window": {
11、"backgroundTextStyle": "light",
12、"navigationBarBackgroundColor": "#fff",
13、"navigationBarTitleText": "WeChat",
14、"navigationBarTextStyle": "black"
15、},
16、"tabBar":{
17、"list":[{
18、"pagePath":"pages/mypage/mypage",
19、"text":"我的页面"
20、}, {
21、"pagePath":"pages/user/user",
22、"text":"用户页面"
23、}]
24、},
25、"sitemapLocation": "sitemap.json"
26、}
27、在app.js的globalData定义一个全局变量user，代码如下：
28、globalData: {
29、userInfo: null,
30、user:null
31、}
32、在项目user.js文件的onload方法判断当user为null时跳转到login页面，代码如下;
33、var app = getApp()
34、onLoad: function () {
35、if (app.globalData.user == null){
36、wx.redirectTo({
37、url: '../login/login',
38、})
39、}
40、},
41、这里之所以用redirectTo而不是navigatTo是因为navigatTo能返回，navigatTo时不会卸载user页面，返回就可以成功返回到user页面，而这里要求是登录成功才能跳转到user页面
42、设计login.wxml，代码如下:
43、<!--pages/login/login.wxml-->
44、<view class='container'>
45、<view class='title'>
46、<text>登录系统</text>
47、</view>
48、<form bindsubmit="onSubmit">
49、<view>
50、<text>账号：</text>
51、<input placeholder='请输入账号' name="account" />
52、</view>
53、<view>
54、<text>密码:</text>
55、<input password='true' placeholder='请输入密码' name="pwd"/>
56、</view>
57、<view class='button'>
58、<button type='primary' form-type='submit'>登录</button>
59、</view>
60、</form>
61、</view>
62、样式文件‘login.wxss’代码如下：
63、form{
64、width: 310px;
65、height: 240px;
66、line-height: 40px;
67、/* border: 1px solid red; */
68、}
69、input{
70、border: 1px solid #ccc;
71、width: 310px;
72、height: 40px;
73、}
74、.button{
75、margin-top: 20px;
76、}
77、.title text{
78、font-size: 25px;
79、color: #666;
80、}
81、form text{
82、font-size: 20px;
83、color: #666;
84、}
85、设置登录成功跳转到user页面，这里因为user页面配置到了tabBar所以不能用原来的方式跳转，需要用switchTab方法，代码如下：
86、onSubmit:function(e){
87、app.globalData.user = e.detail.value;
88、console.log(app.globalData.userInfo)
89、if (app.globalData.user.account == 'abc' && app.globalData.user.pwd == 'abc') {
90、wx.showToast({
91、title: '登录成功',
92、duration:2000,
93、})
94、wx.switchTab({
95、url: '../user/user'
96、})
97、}
98、else{
99、wx.showToast({
100、title: '用户名或密码错',
101、duration: 2000,
102、})
103、}
104、}
105、在user页面显示用户名，user.wxml代码如下：
106、<text>欢迎{{username}}</text>
107、在user.js的onload方法中，给username赋值，代码如下：
108、onLoad: function () {
109、if (app.globalData.user == null){
110、wx.redirectTo({
111、url: '../login/login',
112、})
113、}
114、else{
115、this.setData({username:app.globalData.user.account})
116、}
117、},
118、编译运行代码，登录界面如下图
119、输入用户密码abc后，成功跳转到user页面
以上就是小程序登录这篇文章的一些介绍，希望对大家有所帮助。
