Simone微信小程序登录界面的设计
的有关信息介绍如下：
微信小程序登录界面的设计
打开微信开发者工具，在项目pages中新建三个页面，分别为mypage、login和user，在app.json中注册这三个页面，将mypage设为第一页面，同时添加底部tabBar，app.josn代码如下;
{
"pages": [
"pages/mypage/mypage",
"pages/index/index",
"pages/logs/logs",
"pages/login/login",
"pages/user/user"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"tabBar":{
"list":[{
"pagePath":"pages/mypage/mypage",
"text":"我的页面"
}, {
"pagePath":"pages/user/user",
"text":"用户页面"
}]
},
"sitemapLocation": "sitemap.json"
}
在app.js的globalData定义一个全局变量user，代码如下：
globalData: {
userInfo: null,
user:null
}
在项目user.js文件的onload方法判断当user为null时跳转到login页面，代码如下;
var app = getApp()
onLoad: function () {
if (app.globalData.user == null){
wx.redirectTo({
url: '../login/login',
})
}
},
这里之所以用redirectTo而不是navigatTo是因为navigatTo能返回，navigatTo时不会卸载user页面，返回就可以成功返回到user页面，而这里要求是登录成功才能跳转到user页面
设计login.wxml，代码如下:
样式文件‘login.wxss’代码如下：
form{
width: 310px;
height: 240px;
line-height: 40px;
/* border: 1px solid red; */
}
input{
border: 1px solid #ccc;
width: 310px;
height: 40px;
}
.button{
margin-top: 20px;
}
.title text{
font-size: 25px;
color: #666;
}
form text{
font-size: 20px;
color: #666;
}
设置登录成功跳转到user页面，这里因为user页面配置到了tabBar所以不能用原来的方式跳转，需要用switchTab方法，代码如下：
onSubmit:function(e){
app.globalData.user = e.detail.value;
console.log(app.globalData.userInfo)
if (app.globalData.user.account == 'abc' && app.globalData.user.pwd == 'abc') {
wx.showToast({
title: '登录成功',
duration:2000,
})
wx.switchTab({
url: '../user/user'
})
}
else{
wx.showToast({
title: '用户名或密码错',
duration: 2000,
})
}
}
在user页面显示用户名，user.wxml代码如下：
在user.js的onload方法中，给username赋值，代码如下：
onLoad: function () {
if (app.globalData.user == null){
wx.redirectTo({
url: '../login/login',
})
}
else{
this.setData({username:app.globalData.user.account})
}
},
编译运行代码，登录界面如下图
输入用户密码abc后，成功跳转到user页面
