详解：小程序如何授权登录并获取用户绑定手机号？
微信小程序中有许多地方需要用户注册信息的地方，需要填写手机号等。下面给大家分享微信小程序获取手机号授权用户登录功能，有了这个组件可以快速获取微信绑定手机号码，无须用户填写。
1
如何实现页面进入小程序授权登录？
实现方法：写一个类似微信授权登录的页面，让用户通过按钮触发getPhoneNumber，实现登录授权。再用户进入小程序的时候加个判断，如果未授权，跳到这个登录页面，如果授权，跳到首页。
微信小程序文档中给出如下示例
获取微信用户绑定的手机号，需先调用login接口。
因为需要用户主动触发才能发起获取手机号接口，所以该功能不由API来调用，需用<button>组件的点击来触发。
注意：目前该接口针对非个人开发者，且完成了认证的小程序开放。需谨慎使用，若用户举报较多或被发现在不必要场景下使用，微信有权永久回收该小程序的该接口权限。
使用方法
需要将<button>组件的open-type值设置为getPhoneNumber，当用户点击并同意之后，可以通过bindgetphonenumber事件回调获取到微信服务器返回的加密数据， 然后在第三方服务端结合session_key以及app_id进行解密获取手机号。
注意
在回调中调用wx.login登录，可能会刷新登录态。此时服务器使用code换取的sessionKey不是加密时使用的sessionKey，导致解密失败。建议开发者提前进行login;或者在回调中先使用checkSession进行登录态检查，避免login刷新登录态。
2
全局判断
3
login登录页判断
（一）index.wxml
<view wx:if="{{isHide}}">
<view wx:if="{{canIUse}}">
<view class='header'>
<image src='../../../we7/resource/images/login.png'></image>
</view>
<view class='content'>
<text>请依次允许获得你的公开信息及手机号码</text>
</view>
<view class="" >
<button class="{{flag?'show':'hide'}}" type="primary" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">{{AuthorizedLogin}}</button>
<button class="{{flag?'hide':'show'}}" type="primary" lang="zh_CN" open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber">{{UserPhone}}</button>
</view>
</view>
<view wx:else>请升级微信版本</view></view> （二）index.wxss
.header {
margin: 90rpx 0 90rpx 50rpx;
border-bottom: 1px solid #ccc;
text-align: center;
width: 650rpx;
height: 300rpx;
line-height: 450rpx;}.header image {
width: 200rpx;
height: 200rpx;}.content {
margin-left: 50rpx;
margin-bottom: 90rpx;}.content text {
display: block;
color: #9d9d9d;
margin-top: 40rpx;} /* .operBtn{
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
}
.operBtns{
background: #eef0ed !important;
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
color: #000300 !important;
} */.hide{
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
display: none;}.show{
display: block;
/* background: #eef0ed !important; */
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
/* color: #000300 !important; */}（三）index.js
4
某个详情页手机号授权判断
使用的遮罩层写法
（一）index.html
（二）index.wxss
/* 手机号授权 */.float {
height: 100%;
width: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
top: 0;
left: 0;}.floatContent {
/* padding: 20rpx 0; */
width: 80%;
background: #fff;
margin: 40% auto;
border-radius: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: relative;
height: 255rpx;}.floatContent text {
color: #000;
font-size: 40rpx;
display: block;
margin: 0 auto;
position: absolute;
top: 50rpx;
/* text-align: center; */
/* line-height: 60rpx; */
border-radius: 30rpx; }.floatText{
width: 100%;
height: 100rpx;
display: flex;
justify-content: flex-start;
position: absolute;
bottom: 0;}.btn-cancle{
line-height: 100rpx;
flex: 1;
margin: 0;
padding: 0;
border-radius: none;}（三）index.js
5
返回参数说明
参数 | 类型 | 说明 | 最低版本 |
|---|---|---|---|
encryptedData | String | 包括敏感数据在内的完整用户信息的加密数据，详细见加密数据解密算法 | |
iv | String | 加密算法的初始向量，详细见加密数据解密算法 | |
cloudID | String | 敏感数据对应的云 ID，开通云开发的小程序才会返回，可通过云调用直接获取开放数据，详细见云调用直接获取开放数据 | 2.8.0 |
敏感数据有两种获取方式，一是使用 加密数据解密算法 将 encryptedData 在开发者后台解密，二是使用云调用直接通过 cloudID 获取开放数据。
获取得到的开放数据为以下 json 结构：
但是到这里你会发现其实根本不详尽尤其是解密和错误代码方面。首先如手册所述，解析加密数据包不太明白我给大家贴个示例
后台解析代码就是利用传过去的三个值，来进行解析。每个语言解析方式不同，请下载样例。微信官方提供了多种编程语言的示例代码，每种语言类型的接口名字均一致。调用方式可以参照示例。
注意解析方式跟解析用户信息是一个解析方式！！！！
在这里小编遇到了一个问题解析回的形式虽然跟文档相同但是！
却是这个样子的数据：
这样的情况其实是因为开发的基础库版库过低造成的
配置地点在这里：
小编修改为v1.9.1之后呈现形式就如同官网手册 一样了
至此获取微信绑定的用户手机号完成！