首先获取用户信息 需要一个按钮 获取手机号又需要一个按钮
获取用户信息 getUserInfo 已经被替换 现在只能获取到匿名的,要用新的方法getUserProfile,
<button type="default" class="lb_btn" @click="clickBtn">获取用户信息</button>
<view class="login_btn">
<button class="lb_btn" type="primary" open-type="getPhoneNumber"
@getphonenumber="onGetPhoneNumber">获取手机号</button>
</view>
获取用户信息(直接获取会出现报错,需要加个弹窗)
clickBtn() {
var _this = this
_this.showmask = true
setInterval(() => {
_this.showmask = false
}, 9000);
uni.showModal({
title: '温馨提示',
content: '亲,授权微信登录后才能正常使用小程序功能',
success(res) {
_this.showmask = false
//如果用户点击了确定按钮
if (res.confirm) {
uni.getUserProfile({
desc: '获取你的昵称、头像、地区及性别',
success: res => {
console.log(res.userInfo.avatarUrl, res.userInfo.nickName);
var avatarUrl = res.userInfo.avatarUrl
var username = res.userInfo.nickName
uni.login({
provider: 'weixin',
success: (res) => {
//获取临时登录凭证code
var code = res.code;
// console.log('获取临时登录凭证code', this.code)
}
});
},
fail: res => {
//拒绝授权
wx.showToast({
title: '您拒绝了请求,不能正常使用小程序',
icon: 'error',
duration: 2000
});
return;
}
});
} else if (res.cancel) {
//如果用户点击了取消按钮
wx.showToast({
title: '您拒绝了请求,不能正常使用小程序',
icon: 'error',
duration: 2000
});
return;
}
}
});
},
获取手机号
前端解密
安装 crypto-js
npm install crypto-js
下载 WXBizDataCrypt.js 文件 link.
打开Node文件夹,把 WXBizDataCrypt.js 文件放入你的项目中。(比如我是放在我的common文件夹下)
在需要解密的页面引用该文件
import WXBizDataCrypt from “@/common/WXBizDataCrypt.js”; //请以你的实际地址为准
具体代码如下,关键位置请看注释
onGetPhoneNumber(PhoneNumber) {
let appid = "wxce185cd1da123456" //需替换
let secret = "25d0fe7478355910fc143ce6b1234567" //需替换
//调用 wx.login 接口,获取code
uni.login({
provider: 'weixin',
success: res => {
let url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' +
secret +
'&js_code=' +
res.code + '&grant_type=authorization_code';
//用 code 换取 session 和 openId
uni.request({
url: url, // 请求路径
success: res => { //成功res返回openid,session_key
// console.log(res)
//解密用户信息
let pc = new WXBizDataCrypt(appid, res.data.session_key);
let data = pc.decryptData(PhoneNumber.detail.encryptedData,
PhoneNumber.detail.iv);
// //data就是最终解密的用户信息
// countryCode: "86" 区号
// phoneNumber: "15634123456" 用户绑定的手机号(国外手机号会有区号)
// purePhoneNumber: "15634123456" 没有区号的手机号
// watermark:
// appid: "wxce185cd1da123456"
// timestamp: 1607906868
console.log(data)
},
fail: err => {
console.log(err)
}
})
}
})
}