1、获取个人信息,使用uni.getUserProfile,无需button,但获取电话需要open-type="getPhoneNumber"
2、获取头像信息及code
getUserInfo(e) {
uni.getUserProfile({
desc: "获取个人信息",
success: (res) => {
this.userInfo = res.userInfo
console.log(this.userInfo)
uni.showToast({
title: '请授权手机号',
mask: false,
duration: 1000,
icon: 'none',
})
},
fail: getUserProfileFail => {
uni.showToast({
title: '授权失败',
mask: false,
duration: 1000,
icon: 'none',
})
}
})
uni.login({
provider: 'weixin',
success: (res) => {
if (res.code) { //微信登录成功 已拿到code
console.log('微信登录成功 已拿到code', res.code)
this.jsCode = res.code //保存获取到的code
uni.request({
url: 'https://api.weixin.qq.com/sns/jscode2session',
method: 'GET',
data: {
appid: this.myAppID, //小程序的APPID
secret: 'XXXXXXXXXXXXXXX', //小程序的secret,
js_code: res.code, //wx.login 登录成功后的code
grant_type: 'authorization_code'
},
success: (cts) => {
// 换取成功后 暂存这些数据 留作后续操作
console.log('换取成功', cts)
this.openid = cts.data.openid //openid 用户唯一标识
this.unionid = cts.data.unionid //unionid 开放平台唯一标识,不一定有
this.session_key = cts.data.session_key //session_key 会话密钥
}
});
} else {
console.log('登录失败!' + res.errMsg)
}
}
})
},
3、根据返回的信息,获取电话号码
onGetPhoneNumber(e) {
if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户拒绝授权
//拒绝授权后弹出一些提示
uni.showToast({
title: '拒绝授权',
mask: false,
duration: 1000,
icon: 'none',
})
} else { //允许授权
console.log('允许授权', e.detail.encryptedData)
// e.detail.encryptedData //加密的用户信息
// e.detail.iv //加密算法的初始向量 时要用到
let pc = new WXBizDataCrypt(this.myAppID, this.session_key); //下载并引入WXBizDataCrypt
let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
console.log(data) //data就是最终解密的用户信息
this.mobile = data.phoneNumber
this.mobile = this.mobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
console.log(this.mobile)
this.logIn()
}
},
4、由于获取的电话号码需要解码,所以需要下载微信官方的解码文件WXBizDataCrypt
官方地址:服务端获取开放数据 | 微信开放文档
引入并使用:import WXBizDataCrypt from "@/common/WXBizDataCrypt.js";
参考地址:uniapp开发微信小程序获取用户手机号 - DCloud问答
我的这份只是存放
uniapp 微信小程序授权登录和获取电话号码_uni-app open-type="getphonenumber" 不显示-CSDN博客