小程序wx.login和getPhoneNumber

最近在写小程序登录界面获取微信手机号功能，记录一下大概过程：

image.png

小程序登录页面需要获取当前微信手机号，button设置如下：
wxml文件：

<button bindgetphonenumber="getPhoneNumber" open-type='getPhoneNumber' class="wechat_btn" hover-class='none' disabled='{{canClick != true}}'>
   <image class='wechatImg' src='../../../../image/login_wechat.png'></image>
</button>

js文件：

data: {
  canClick: false
}

wxss文件：

.wechatImg {
  height: 110rpx;
  width: 110rpx;
}

点击button按钮后，弹出获取手机号，询问用户是否允许？
由于getPhoneNumber中提示：

image.png

因此在onLoad中先调用wx.login获取code，在data中定义一个变量用来保存code。
如果code存在，微信按钮可点击，如果code不存在，微信按钮不可点击。
在getPhoneNumber回调中，

getPhoneNumber: function(e) { 
        console.log(e.detail.errMsg) 
        console.log(e.detail.iv) 
        console.log(e.detail.encryptedData) 
    }

将iv，encryptedData和code传递给后端进行解密。