Check the I have read and agree to the agreement before the WeChat applet authorizes to obtain the mobile phone number
The effect you want to achieve: the user clicks the WeChat one-click registration button. If the user does not check the agreement, you will be prompted to check the user agreement. If you check it, you will directly obtain the WeChat user's mobile phone number ciphertext.
The first thing I thought about was to add a judgment directly to the getPhoneNumber() method. The problem with this method is that if you click the button without checking the agreement, the authorization page will pop up, which will block the judgment prompt added in the front, and you will see the prompt box prompting you to check the user agreement after clicking the authorization agreement. Then check the agreement and click the button again and the authorization pop-up box will appear again, which is not a good user experience.
Solution:
Write two identical buttons on the wxml page, bind different methods, add a judgment to show and hide, the judgment condition is whether to check, if checked, call the method of obtaining the mobile phone number, if not checked, it will display a click pop-up prompt check The method of choice.
<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>
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
}