uniapp - 新版本微信小程序登录、获取电话号码；后端调用微信API不必自己写调用网址【附有前后端完整代码】
uniapp文档：文档地址
1、uniapp的登录
（1）登录：通过前端获取到code，可直接调用WxMaService类的方法即可实现微信接口
uni.login({
provider: 'weixin',
onlyAuthorize: true,
success: async (loginRes) => {
//处理：调用后台接口通过loginRes.code获取
},
fail: function(err) {
that.$msg.error("微信接口失败！")
}
});
后台接口代码：使用weixin-java-miniapp直接调用集成好的方法
1)引入
com.github.binarywang
weixin-java-miniapp
4.5.0
2）调用
在4.5.0的版本中，已经不需要传入encryptedData、ivStr，只需要传入uniapp中uni.login返回或的code就可以了
/**
* 登录
* @return
*/
@RequestMapping("login")
public Result2、uniapp的获取用户信息
uni.getUserProfile({
desc: 'weixin',
lang: 'zh_CN',
success: (infoRes) => {
console.log("用户：",infoRes.userInfo);
}
})
3、获取手机号码
通过唤起授权手机号的弹框，授权后即可访问后端接口，也是直接调用即可
1）uniapp：通过设置按钮的open-type=“getPhoneNumber” @getphonenumber="getPhoneNumber"来唤起
getPhoneNumber(e) {
let that = this;
//console.log("3 缓存的用户信息", uni.getStorageSync("sessionUser"));
if (e.detail.errMsg == "getPhoneNumber:ok") { // 用户允许或去手机号
//获取到手机号码
let params = {code: e.detail.code, encryptedData: e.detail.encryptedData, ivStr: e.detail.iv};
//调用后端接口getPhoneNoInfo方法
that.$api.sys.getPhoneNoInfo(params).then(res => {
const {
success,
message,
result
} = res.data;
if (!success) {
that.$msg.error(message)
return
}
//存入Storage
uni.setStorageSync("sessionPhone",result.phoneNumber);
})
}
},
2）后端接口方法
/**
* 获取手机号
* @return
*/
@RequestMapping("getPhoneNoInfo")
public Result4、功能整合
我的登录功能：点击登录时，获取到openid、用户信息、电话号码，一起存入后台，整合之后我的使用大概是这样子的：
点击获取信息：
//1 获取用户信息
uni.getUserProfile({
desc: 'weixin',
lang: 'zh_CN',
success: (infoRes) => { //用户信息：infoRes.userInfo
//2 登录：获取code
uni.login({
provider: 'weixin',
onlyAuthorize: true,
success: async (loginRes) => { //loginRes.code可通过后端接口获取到openid等信息
//带着code、获取到的用户信息访问后端接口获取openid的同时存入数据库
that.$api.sys.getPhoneNoInfo(params).then(res => {
})
// 3 获取手机号：展示获取手机号按钮的弹框，使用完成，点击获取按钮调用后端方法
getPhoneNumber(e) {
//关闭获取手机号按钮的弹框
}
},
});
}
})