小程序手机号获取
因为公司业务需要在获取用户手机号以后还可以修改用户的手机号
一开始是想在input框上绑定事件,后来发现丫的根本就不生效才明白获取手机号的事件只能写在button上所以我用了一种比较笨的方法实现
先是一段简单的input框通过wx:if控制文本框或者获取手机号按钮显示
<van-field wx:if="{{phoneShow}}" label="手机号:" value="{{ floorPrice.phone }}" placeholder="请输入11位手机号码" bind:change="onChangePhone" border="{{ false }}" />
小程序获取手机号需要在button上将open-type 的值设置为 getPhoneNumber然后绑定bindgetphonenumber事件
<view class="phone" wx:else>
<text>手机号:</text>
<button type="text" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">请输入11位手机号码</button>
</view>
文本框change事件
onChangePhone(e) {
let potn = "floorPrice.phone"
this.setData({
[potn]: e.detail
})
},
整体思路:我们通过微信的API拿到用户信息的加密数据以后需要发送给后台解码,然后后台解码后返回用户手机号
getPhoneNumber(e) {
console.log(e)
//e.detail里面就是包含我们需要的数据了
// encryptedData: 用户信息的加密数据
//errMsg: 授权状态
//iv:加密算法的初始向量
if (e.detail.errMsg == "getPhoneNumber:ok") {//判断用户授权成功以后
let data = {
appId: app.globalData.userInfo.appid,//appid
openId: app.globalData.userInfo.openId,//openid
sessionKey: app.globalData.userInfo.session_key,//session_key
encryptedData: e.detail.encryptedData,//
iv: e.detail.iv
}
getPhonemima(data).then((res) => {//调取后台接口
if (res.code == 200) {
app.globalData.userInfo.phone = res.data.phoneNumber
//将返回的手机号存入全局变量中
let potn = "floorPrice.phone"
//给手机号赋值及将状态改为true显示文本框
this.setData({
[potn]: app.globalData.userInfo.phone,
phoneShow: true
})
}
})
}
},
!!!开发过程中遇到的问题:
首先点击获取手机号的时候有可能会遇到该appid没有权限这样的报错
这种问题上的出现是因为在开发企业级微信小程序项目时企业微信没有认证出现的
解决方式:设置→基本设置→微信认证
完整代码:
<van-field wx:if="{{phoneShow}}" label="手机号:" value="{{ floorPrice.phone }}" placeholder="请输入11位手机号码" bind:change="onChangePhone" border="{{ false }}" />
<view class="phone" wx:else>
<text>手机号:</text>
<button type="text" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">请输入11位手机号码</button>
</view>
phoneShow: false,//用于控制获取手机号按钮及input框的显示隐藏
floorPrice: {
phone: ""
}
onChangePhone(e) {
let potn = "floorPrice.phone"
this.setData({
[potn]: e.detail
})
},
getPhoneNumber(e) {
console.log(e)
if (e.detail.errMsg == "getPhoneNumber:ok") {
let data = {
appId: app.globalData.userInfo.appid,
openId: app.globalData.userInfo.openId,
sessionKey: app.globalData.userInfo.session_key,
encryptedData: e.detail.encryptedData,
iv: e.detail.iv
}
getPhonemima(data).then((res) => {
if (res.code == 200) {
console.log(res.data)
app.globalData.userInfo.phone = res.data.phoneNumber
let potn = "floorPrice.phone"
this.setData({
[potn]: app.globalData.userInfo.phone,
phoneShow: true
})
}
})
}
},
效果图