老样子,先看效果图
这是最后调接口成功后返回的数据
首先,大家要清楚获取手机号的大致流程:
1.要登陆,通过wx.login() 获取到返回的code
2.再拿着这个code和appid以及secret(密钥)这三个参数请求微信官方的接口("https://api.weixin.qq.com/sns/jscode2session?appid=" + appid +
"&secret=" + secret + "&js_code=" + code + "&grant_type=authorization_code" 下边会在api.js文件提到)获取到这个接口返回的sessionkey和openid(这个sessionkey和openid就是最后一步获取手机号时候传给后台的参数之二)
做到这里 就可以获取手机号了 另外要知道的是button按钮需要绑定上 open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
通过这样的button按钮能够获取到encryptedData和iv 这两个也是获取手机号传给后台的参数 一共传给后台的是四个参数
========================================================================================================================================================
下边具体介绍一下代码实现
templete
<button class='bottom' type='primary' open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
手机号授权
</button>
js
先将封装好的api引入进来
大家引入的时候注意自己的路径 给大家看下我的目录结构
data数据
appid和密钥需要你们自己获取哦 登陆微信公众平平台可以看到
js:
async init() {
var code = await wxlogin() //登陆成功后返回的code
// 获取sessionkey
var key = await htxcx(this.appid, this.secret, code) //(基于登陆成功后获取的sessionkey)
this.phoneParams.sessionkey = key.data.session_key;
this.phoneParams.openid = key.data.openid;
console.log(code,key,55555)
},
async getPhoneNumber(e) {
console.log(e,"shouji:")
this.phoneParams.encrypdata = e.detail.encryptedData //!!!!!!!!!!!!!!提示该appid没有权限是因为微信没有认证
this.phoneParams.ivdata = e.detail.iv
var phone = await getPhone(this.phoneParams)
console.log(phone,123222)
if (this.phone) {
this.phoneStatus = true
this.reLaunch()
}
},
async wxGetUserInfo() {
var info = await wxUserInfo()
this.loginStatus = true
this.reLaunch()
},
reLaunch() {
if (this.loginStatus && this.phoneStatus) {
uni.setStorageSync("tongfang-phone", this.phone)
// uni.reLaunch({//信息更新成功后跳转到小程序首页
// url: '/pages/index/index'
// });
}
},
到这里获取手机号页面的代码就结束了
下边是引入的api的相关文件
api.js
export function uniAjax(url, params, method) {
var method = method || "GET"
// 处理特殊字符
return new Promise((resolve, reject) => {
try {
uni.request({
url: url,
data: params,
method: method,
success: (res) => {
resolve(res)
},
fail: (fail) => {
reject(fail)
},
complete: (res) => {
// console.log("complete:",res)
},
})
} catch (e) {
reject(e)
}
})
}
// 接口获取 sessionkey
export const htxcx = (appid, secret, code) => uniAjax("https://api.weixin.qq.com/sns/jscode2session?appid=" + appid +
"&secret=" + secret + "&js_code=" + code + "&grant_type=authorization_code")
// 解密手机号
export const getPhone = (obj) => uniAjax("你们后台的接口地址", obj, "POST")
wxlogin.js
import {getPhone as getphone} from './api.js'
/*
微信登录
返回 code
*/
export const wxlogin = ()=> {
return new Promise((resolve, reject)=>{
uni.showLoading({
title: '登录中...'
});
uni.login({
provider: 'weixin',
success: function(loginRes) {
resolve(loginRes.code);
uni.hideLoading();
},
fail(err) {
reject(err)
uni.hideLoading();
}
})
})
}
/*
获取微信用户信息 要先调用登录接口
返回用户信息
*/
export const wxUserInfo = ()=>{
return new Promise((resolve, reject)=>{
uni.getUserInfo({
provider: 'weixin',
success: function(res) {
resolve(res);
},
fail(err) {
reject(err)
}
});
})
}
/*
获取微信用户手机号 要先调用登录接口
参数:obj{
sessionkey,
ivdata,
encrypdata
}
返回手机号相关信息
*/
export const getPhone = (obj)=>{
return new Promise((resolve, reject)=>{
getphone(obj).then(res=>{
resolve(res.data)
},err=>{
reject(err)
})
})
}
以上就是全部代码
注意:如果说你们的appid没有微信认证(如下图) 就会提示该appid没有权限 因为微信官方文档有说 获取手机号这些只针对于非个人使用
总结:代码没有很复杂 但是需要下功夫研究
2021-5-29补充:在小程序上线的时候 发现线上的一直进不去首页 即使允许授权 也进不去 后来了解发现 小程序为了保护用户个人隐私 是不允许前端将sessionkey、openid存下来的 因为这些重要信息 要存在服务器里 我们需要提供code请求后台接口让后台返回sessionkey 这样才能达到允许授权的效果 当然大家自己本地测试的时候 是可以用的 但是如果上线的话 就需要然后台返回了
所以我在init里做了如下修改
async init() {
var code = await wxlogin() //登陆成功后返回的code
uni.request({
url: '后台接口地址',
data: {code:code},
method: 'post',
success: (res) => {
const data = res.data
this.phoneParams.sessionkey = data.session_key;
this.phoneParams.openid = data.openid;
}
})
},