微信小程序实现登录界面

网友投稿 604 2023-11-11

微信小程序的登录界面实现，供大家参考，具体内容如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<view class="container">
<view class="wrapper">
<view class="left-top-sign">LOGIN</view>
<view class="welcome">
欢迎回来！
</view>
<view class="input-content">
<view class="input-item">
<text class="tit">手机号码</text>
<input type="text" placeholder="请输入手机号码" id=phone data-type=phone bindinput=handerInput />
</view>
<view class="input-item">
<text class="tit">密码</text>
<input type="password" placeholder="请输入密码" id=password data-type=password bindinput=handerInput />
</view>
</view>
<button class="confirm-btn">登录</button>
<view class="forget-section">
忘记密码?
</view>
</view>
<view class="register-section">
还没有账号?
<text>马上注册</text>
</view>
</view>

微信小程序实现登录界面

最基本的表单提交。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
data: {
phone: , //手机号
password:   //密码
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
handerInput(event) {
//let type = event.currentTarget.dataset.type;
let type = event.currentTarget.id;
console.log(event);
this.setData({
[type]: event.detail.value
})
},
/**

双向绑定的实现，利用bindinput 事件，可用id或者dataset 唯一确定数据。

id可传入一个数据，dataset可传入多个数据。

微信小程序的交互：消息显示框。(官方链接)

对于登录按钮绑定一个点击回调函数。

后端验证，调用接口，通过响应的状态码来返回给用户登录的信息。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let result = await request(/login/cellphone, { phone, password });
if (result.code === 200) {
wx.showToast({
title: 登陆成功,
})
}
else if (result.code === 400) {
wx.showToast({
title: 手机号错误,
icon: none
})
}
else if (result.code === 502) {
wx.showToast({
title: 密码错误,
icon: none
})
}
else {
wx.showToast({
title: 登录失败,请重新登录,
icon: none
})
}
},

个人中心点击头像，跳转登录界面，登录成功后将用户个人信息数据缓存（使用setStorageSync，和getStorageSync 方法），然后使用switchTab 跳转到tabbar下的个人中心页，然后将获得的缓存数据储存到js的data中，注意json格式的转化，最后在

html里三元运算特判一下。

?
1
2
3
4
5
6
7
8
9
<view class="user-info-box" bindtap=toLogin>
<view class="portrait-box">
<image class="portrait"
src={{userInfo.avatarUrl?userInfo.avatarUrl:"/static/images/personal/missing-face.png"}}></image>
</view>
<view class="info-box">
<text class="username">{{userInfo.nickname?userInfo.nickname: 游客}}</text>
</view>
</view>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//login.js
if (result.code === 200) {
wx.showToast({
title: 登陆成功,
})
wx.setStorageSync(userInfo, JSON.stringify(result.profile));
wx.switchTab({
url: /pages/personal/personal
})
}
// personal.js
onLoad: function (options) {
let userInfo = wx.getStorageSync(userInfo);
if (userInfo) {
this.setData({
userInfo: JSON.parse(userInfo)
})
}
},
您可能感兴趣的文章:微信小程序登录与注册功能的实现详解微信小程序实现登录注册功能详解微信小程序入门从这里出发（登录注册、开发工具、文件及结构介绍）微信小程序实现注册登录功能(表单校验、错误提示)微信小程序+云开发实现欢迎登录注册微信小程序登录态和检验注册过没的app.js写法微信小程序实现登录注册tab切换效果微信小程序实现登录界面示例微信小程序实现登录注册界面

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 链接
上一篇:微信小程序实现聊天室功能
下一篇:微信小程序实现签到功能
相关文章

 发表评论

暂时没有评论，来抢沙发吧~