订阅微信小程序登录界面的设计
来源：网络收集 点击： 时间：2024-04-25打开微信开发者工具，在项目pages中新建三个页面，分别为mypage、login和user，在app.json中注册这三个页面，将mypage设为第一页面，同时添加底部tabBar，app.josn代码如下;
{
pages: ,
window: {
backgroundTextStyle: light,
navigationBarBackgroundColor: #fff,
navigationBarTitleText: WeChat,
navigationBarTextStyle: black
},
tabBar:{
list:
},
sitemapLocation: sitemap.json
}
2/7在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页面
3/7设计login.wxml，代码如下:
!--pages/login/login.wxml--
view class=container
view class=title
text登录系统/text
/view
form bindsubmit=onSubmit
view
text账号：/text
input placeholder=请输入账号 name=account /
/view
view
text密码:/text
input password=true placeholder=请输入密码 name=pwd/
/view
view class=button
button type=primary form-type=submit登录/button
/view
/form
/view
样式文件‘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;
}
4/7设置登录成功跳转到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,
})
}
}
5/7在user页面显示用户名，user.wxml代码如下：
text欢迎{{username}}/text
在user.js的onload方法中，给username赋值，代码如下：
onLoad: function () {
if (app.globalData.user == null){
wx.redirectTo({
url: ../login/login,
})
}
else{
this.setData({username:app.globalData.user.account})
}
},
6/7编译运行代码，登录界面如下图
7/7输入用户密码abc后，成功跳转到user页面
版权声明：
1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。
2、本站仅提供信息发布平台，不承担相关法律责任。
3、若侵犯您的版权或隐私，请联系本站管理员删除。
4、文章链接：http://www.1haoku.cn/art_595197.html
