微信小程序实现一键登录

网友投稿 1768 2023-11-11

本文实例为大家分享了微信小程序实现手机号登录的具体代码，供大家参考，具体内容如下

项目需求

微信小程序实现一键登录

点击按钮获取用户电话号码绑定到后台，登录。

实现思路

1、使用微信开放功能为获取用户手机号的button按钮绑定点击事件为获取用户授权。

2、如果获取用户手机号授权成功调用微信登录接口获取code。

3、用获取到的code去调用后台接口获取到用户的openid。

4、code+openid去调用后台写的小程序自动登录接口获取到access_token，至此登录功能完成。

5、查询用户是否绑定过手机号，未绑定就去调用绑定手机号的接口。绑定过就直接提示登录成功，根据自己项目需求跳转页面，我是直接返回到上一页。

关键代码

?
1
2
3
4
5
<!-- wxml -->
<button open-type="getPhoneNumber" class="button" bindgetphonenumber="author">
<image class="button-img" src="../../assets/images/wx_icon@2x.png"></image>
<text>微信一键授权登录</text>
</button>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// wxss
@import ../../common.less;
.button {
width: 80%;
height: 88rpx;
display: flex;
background: @baseColor1;
color: #fff;
font-size: 30rpx;
border: none;
border-radius: 44rpx;
justify-content: center;
align-items: center;
font-weight: 400;
margin: 254rpx auto 74rpx;
.button-img {
width: 56rpx;
height: 40rpx;
margin-right: 6rpx;
}
}

参考文档

1. 小程序登录 | 微信开放文档

2. wx.login(Object object) | 微信开放文档

3. button | 微信开放文档

4. 获取手机号 | 微信开放文档
您可能感兴趣的文章:微信小程序实现手机验证码登录微信小程序手机号验证码登录的项目实现微信小程序获取手机号授权用户登录功能微信小程序实战之登录页面制作(5)微信小程序用户授权，以及判断登录是否过期的方法微信小程序 授权登录详解（附完整源码）微信小程序实现授权登录一步步教会你微信小程序的登录鉴权微信小程序 本地存储及登录页面处理实例详解微信小程序获取用户信息并保存登录状态详解

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

标签：程序 微信小程序 小程序 判断 实例
上一篇:微信小程序四种弹窗方式实例
下一篇:微信小程序开发一键登录 获取session_key和openid实例
相关文章

 发表评论

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