微信小程序实现手机号授权

首先封装一个弹窗

<!-- 需要使用 button 来授权登录 -->
  <uni-popup ref="popup" type="center">
   <view class="top"><image src="../../static/startLogo.png"></image></view>

   <view class="auth">
    <view>申请获取以下权限</view>
    <text>授权使用你的手机号作为登录凭证</text>
   </view>
   <view class="auth_btn" >
    <button class="btn1" size="mini" open-type="getPhoneNumber" lang="zh_CN" @tap="closePopup" @getphonenumber="getPhoneNumber" withCredentials="true">获取手机号</button>
    <button class="btn2" size="mini" @tap="refuse">拒绝授权</button>
   </view>
  </uni-popup>

授权的回调方法：

getPhoneNumber: function(e) {
   if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
    this.refuse()
   } else {
    var iv = e.detail.iv;
    var encryptedData = e.detail.encryptedData;
    var appId = that.appId;
    var sessionKey = that.sessionKey;
    var pc = new WXBizDataCrypt(appId, sessionKey);
    var data = pc.decryptData(encryptedData, iv);

    that.setUserInfoGlobal0(data.purePhoneNumber); //保存手机号

    //请求微信后台接口返回用户个人信息
    that.getUserInfo()
    //微信扫码则授权后跳转信息查询页面
    if (that.scan_val != '') {
     that.activePage = 'assetManagement'; //跳转
    } else {
     that.activePage = 'home'; //跳转
    }
   }
  }

refuse(){
        uni.showModal({
                title: '警告',
                content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!',
                showCancel: false,
                confirmText: '返回授权',
                success: function(res) {
                        if (res.confirm) {
                                that.openPopup(); //重新打开授权弹框
                        }
                }
        })
}

打开弹窗：

openPopup() {
   this.$refs.popup.open();
  }