uniapp 微信授权登录
前提:想要授权的话 一定要是小程序的开发者。不然头像的标签。授权等等都无法实现
uniapp 提供获取手机号的按钮 和 授权登陆的按钮
话不多说----上菜
<!-- 用户信息登录 -->
<button
type="default"
class="loginButton"
open-type="getUserInfo"
@click="getUserInfo"
>
<view class="row">
<view class="icon">
<u-icon name="weixin-fill" size="28"></u-icon>
</view>
<view style="font-size: 30rpx;">微信登录</view>
</view>
</button>
<!-- 手机号登录 -->
<button
type="default"
class="loginButton"
open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"
>
<view class="row">
<view class="icon">
<u-icon name="weixin-fill" size="28"></u-icon>
</view>
<view style="font-size: 30rpx">微信登录</view>
</view>
</button>
// 用户信息
getUserInfo(e) {
uni.getUserProfile({
desc: "登录授权", // 这个参数是必须的
success: (res) => {
console.log("获取用户信息", "第一个", res.userInfo);
this.userInfo = res.userInfo;
},
fail:(err) =>{
console.log(err)
}
});
},
// 获取 获取手机号的code并授权
getPhoneNumber(e) {
let detail = e.detail;
if (detail.errMsg === "getPhoneNumber:ok") {
let that = this;
this.phoneCode = detail.code;
if (this.phoneCode) {
// 拿到code需要给后端 接口帮你获取到手机号
this.getUserPhone();
}
else {
this.login();
}
} else {
console.log("取消授权!");
}
},
// 获取用户手机号-接口
getUserPhone() {
this.$http
.getPhone({
code: this.phoneCode,
access_token: this.access_token,
})
.then((res) => {
// console.log("用户手机号res====>",res)
if (res.success) {
let resDatas = res.datas;
let phoneInfo = JSON.parse(resDatas.phone_info);
// console.log("获取到的用户手机号相关信息=====>>>>>>", phoneInfo)
this.phoneNumber = phoneInfo.phoneNumber;
console.log("获取到的用户手机号=====>>>>>>", this.phoneNumber);
}
});
},