微信小程序一鍵授權之前勾選協議

微信小程序授權獲取手機號之前勾選我已閱讀並同意協議

想要的效果是，用戶點擊微信一鍵註冊按鈕，如果用戶沒有勾選協議，就提示請勾選用戶協議，如果勾選了，就直接獲取微信用戶的手機號密文。

開始想的是直接在getPhoneNumber（）方法中加一個判斷。這種做法存在的問題是，沒有勾選協議的情況下點擊按鈕後彈出授權頁面，會擋住前面加的判斷提示，點擊授權同意後纔會看到提示請勾選用戶協議的提示框。然後勾選協議再次點擊按鈕時又出現授權彈框，用戶體驗不好。

解決方法：
wxml頁面寫兩個一模一樣的按鈕，綁定不同的方法，顯示隱藏加一個判斷，判斷條件是是否勾選，勾選的話就調用獲取手機號方法，沒勾選的話顯示點擊彈出提示勾選的方法。

代碼如下:

wxml文件：

<view class='choose'>選擇註冊方式</view>
    <button class='btn-getphone' bindtap='showtips' wx:if="{{agree == ''}}">
      <image src='/images/weixin.png'></image>
      <label>微信一鍵註冊</label>
    </button>
    <button class='btn-getphone' open-type="getPhoneNumber" wx:if="{{agree != ''}}" bindgetphonenumber="getPhoneNumber">
      <image src='/images/weixin.png'></image>
      <label>微信一鍵註冊</label>
    </button>
    <label class="checkbox">
     <checkbox-group bindchange="checkboxChange">
        <checkbox value="agree" checked="true"/>
        我已閱讀並同意
      </checkbox-group>
      <label style='color:#CCAE73' bindtap='toprotocol'>
      《****用戶協議》
      </label>
    </label>
</view>

js文件

  data: {
    agree:'agree'  				//默認勾選狀態
  },
  //獲取手機號
getPhoneNumber: function (e) {
    var that = this;
    if (this.data.agree == ''){
      wx.showToast({
        title: '請勾選用戶協議',
        icon: 'none',
        duration: 2000
      })
    }
    if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
        wx.showToast({
          title: '您已取消授權',
          icon: 'none',
          duration: 2000
        })
      } else {
      console.log("同意授權手機號")
      console.log(e);
      var number = e;
      wx.login({
        success: function (res) {
          if (res.code) {
            net.mylog("code是" + res.code);
            net.request_post(false, myurl + '/wx/getInfo',
              { code: res.code },
              function (res2) {
                //請求接口解密
                console.log(number)
                var pc = new WXBizDataCrypt(config.appId, res2.data.session_key)
                var data = pc.decryptData(number.detail.encryptedData, number.detail.iv);
                console.log(data.phoneNumber);
                that.submitRegister(data.phoneNumber); //提交註冊信息
              })
          } else {
            wx.showToast({
              title: "獲取手機號碼失敗",
              icon: 'none',
              duration: 2000
            })
          }
        },
        fail: function (error) {
          wx.showToast({
            title: "獲取手機號碼失敗",
            icon: 'none',
            duration: 2000
          })
        }
      }) 
      }
  } ,


上面代碼中，在util.js文件夾中新建工具類封裝方法。（在頁面中調用封裝的方法時，要記得引用）
var net = require("../../../utils/netTools.js");


封裝post請求：
function request_post(auto,url, data, success, fail) {
    if(auto==true){
      wx.showLoading({
        title: '加載中',
      })
    }
    wx.request({
      url: url, //接口地址
      data: data,
      method: 'POST',
      header: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
      },
      success: function (res) {
        // console.log(res); 
        if (auto == true) {
          wx.hideLoading();
        }
        if (res.data.code==200) {
          success(res.data);
        }else {
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000
            })
        }
      },
      fail:function(){
        wx.showToast({
          title: "服務異常",
          icon: 'none',
          duration: 2000
        })
        if (auto == true) {
          wx.hideLoading();
        }
        if(fail != null){
          fail();
        }
      }
    })
  }
module.exports = {
  request_post: request_post
}