最近在做一个小程序时遇到这样一个需求：要求在点击input框时获取用户的手机号还可以进行修改。但是我们都知道微信小程序获取手机号是通过button按钮的bindgetphonenumber属性来实现的，那么怎么能在input获得焦点时，获取用户手机号呢？
首先，我们先来了解一下怎么通过button按钮来获取用户的手机号。在微信公众平台上，button按钮有一个open-type和bindgetphonenumber的属性：
具体如下：
1.wxml:
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">输入手机号</button>
2.js
在这里我们需要注意首先要获取用户的openid和session_key,获取方式如下：
app.js:
wx.login({
//获取code
success: (res) => {
var code = res.code; //返回code
this.globalData.code = code;
this.globalData.appId = 'wx5a9ded8ac4b1feb3';
this.globalData.secret = '7ccbca95ddc8baf065194b533043a783';
wx.request({
url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + this.globalData.appId + '&secret=' + this.globalData.secret + '&js_code=' + code + '&grant_type=authorization_code',
data: {},
header: {
'content-type': 'json'
},
success: (res) => {
var openid = res.data.openid //返回openid
this.globalData.openId = openid;
this.globalData.session_key = res.data.session_key;
wx.request({
url: this.globalData.req_url + '/WechatUser/dealUserMsg',
method:'post',
header: { 'content-type': 'application/x-www-form-urlencoded' },
data:{
openId:openid
},
success:res=>{
console.log(res);
}
})
}
})
}
})
index.js:
// 点击按钮获取手机号
getPhoneNumber(e) {
wx.request({
url: appData.req_url + '/WXCore/decrypt',
data:{
openId: appData.openId,
encryptedData: e.detail.encryptedData,
sessionKey: appData.session_key,
iv: e.detail.iv
},
header: {
'content-type': 'json'
},
success: res => {
this.setData({
inputShow: true
})
if(!res.data.res){
console.log('未绑定手机号');
}else{
this.setData({
phoneNumber: res.data.bindPhone
})
}
}
})
},
结果如下：
点击允许，这个时候后台会对传过去的数据进行解密（具体度娘搜索微信小程序手机号码解密），就会将手机号码返回。
ok，通过button我们成功的拿到了手机号码，那么怎么能在input框获取焦点时拿到手机号码，并且可以修改呢？
经过a long long time的思考，终于想出了一个土办法。那就是将一个button标签和一个input框通过绝对定位重叠在一起，然后将button标签做成input框的样子，在我们第一次点击的时候成功获取到手机号以后，将button标签通过标志位隐藏，而让input标签显示，并将拿到的手机号码赋给input的value值，如此便可以实现模拟input框获得焦点时获取用户的手机号！！！
虽然土，但是成功将效果实现了不是？
最后给大家和我自己送上一份心灵鸡汤：
你想要的永远和你付出的成正比。
