uni-app 对接微信小程序获取用户个人信息和获取用户手机号码
第一次对接小程序授权的时候以为能一进入这个项目就要调用获取授权信息，后面写好逻辑之后提交审核，一直审核不通过，后面查了原因之后才发现不能一进入页面就调用授权，而且项目需要个人信息和手机号码两个都要获取，所以我只能分开两个页面写两个点击按钮，要进行微信授权一定要有按钮给用户点击才能掉起微信的授权框
获取用户个人信息
html：
//获取用户个人信息
<button class="btn typography" open-type="getUserInfo" @getuserinfo="miniprogramlogin">微信授权</button>
js: （为了方便我把每个步骤都分了一个方法写~）
miniprogramlogin(e) {
var _this = this;
wx.login({
success(res) {
if (res.code) {
_this.miniprogramcode = res.code;
_this.getUserInfo(e);
} else {
console.log('登录失败！' + res.errMsg);
}
}
});
},
//获取微信个人信息
getUserInfo(e) {
var _this = this;
let params = {
code: this.miniprogramcode };
let data = Api.apiCall('get', Api.weixin.miniprogramlogin, params);//请求后端接口
if (data) {
//这个接口我这边后端会返回两种格式，返回sessionKey是未授权过，所以得判断是否返回的是sessionKey和openid
if (data.sessionKey) {
this.sessionKey = data.sessionKey;
//未授权过直接调用微信API
wx.getUserInfo({
success: function(res) {
_this.getuserdata(res);//获取参数再调用接口传给后端
_this.signature = res.signature;
_this.rawData = res.rawData;
}
});
} else {
//已授权过直接保存接口返回的用户信息（看情况可不用这一步）
_this.login(data.userInfo);
uni.setStorageSync('userInfo', data.userInfo);
uni.setStorageSync('userInfos', data.userInfo);
uni.setStorageSync('token', data.tokenHead + data.token);
uni.switchTab({
url: '/pages/index/index'
});
}
}
},
//调用接扣传参解码
getuserdata(resdata) {
var _this = this;
uni.request({
url: '/api/wx/redirect/minAppInfo',
method: 'get',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
encryptedData: resdata.encryptedData,
iv: resdata.iv,
sessionKey: _this.sessionKey,
signature: resdata.signature,
rawData: resdata.rawData
},
success: res => {
_this.wxuserinfo = JSON.parse(res.data);
//下面的看情况可删，因为我要获取两次授权所以用户信息授权完会直接跳到手机号授权页面
uni.setStorageSync('sessionKey', _this.sessionKey);
uni.setStorageSync('signature', resdata.signature);
uni.setStorageSync('rawData', resdata.rawData);
uni.navigateTo({
url: `/public/miniprogramgetphone`
});
}
});
}
获取用户手机号码
html：
//获取用户微信绑定的手机号码
<button class="btn typography" open-type="getPhoneNumber" @getphonenumber="getminiprogramcode">手机号授权</button>
js:
//小程序授权登录接口
getminiprogramcode(e) {
console.log(e)
var _this = this;
//检验session_key是否过期，过期就要重新调用wx.login获取session_key
wx.checkSession({
success(res) {
//session_key 未过期，并且在本生命周期一直有效
console.log(uni.getStorageSync('sessionKey'));
//获取上个页面存进缓存里的信息
_this.sessionKey = uni.getStorageSync('sessionKey');
_this.signature = uni.getStorageSync('signature');
_this.rawData = uni.getStorageSync('rawData');
_this.getPhoneNumber(e);
},
fail() {
// session_key 已经失效，重新登录
console.log('重新登录1')
wx.login({
success(res) {
if (res.code) {
_this.miniappcode = res.code;
_this.getphonecode(e);
} else {
console.log('登录失败！' + res.errMsg);
}
}
});
}
});
},
getPhoneNumber(e) {
var _this = this;
console.log(e.detail.errMsg);
//授权后的处理
if (e.detail.errMsg == 'getPhoneNumber:ok') {
//点击获取的信息
let params = {
encryptedData: e.detail.encryptedData,
sessionKey: _this.sessionKey,
iv: e.detail.iv,
signature: _this.signature,
rawData: _this.rawData,
};
_this.getuserphonnumber(params,e);
}
},
getuserphonnumber(paramsdata,e) {
var _this = this;
let params = {
encryptedData: paramsdata.encryptedData,
sessionKey: paramsdata.sessionKey,
iv: paramsdata.iv,
signature: paramsdata.signature,
rawData: paramsdata.rawData,
};
let data = await Api.apiCall('get', Api.weixin.getminprogramuserphone, params);
if (data) {
//授权登录后保存信息改变登录状态并跳转首页
_this.login(data.userInfo);
uni.setStorageSync('userInfo', data.userInfo);
uni.setStorageSync('userInfos', data.userInfo);
uni.setStorageSync('token', data.tokenHead + data.token);
uni.switchTab({
url: '/pages/index/index'
});
}
}
可能看着会有点乱，后期我会整理一下流程，主要因为我这个项目是要点击两次按钮获取授权信息，所以有些参数信息我只能获取之后存入缓存然后到另一个页面再获取