微信支付宝双端兼容获取手机号头像昵称
1. 页面效果
参考上一篇的 微信小程序获取用户头像昵称手机号最新版
2. 授权手机号弹窗
<u-modal v-model="showAuthorizePhone" :show-title="false"
:show-confirm-button="false">
<view class="slot-content">
<div class="auth-card">
<div class="img">
<img class="avatar-img"
src="@/static/logo-min.png"
mode="widthFix">
</div>
<div class="title">{
{bname}}</div>
<div class="content">申请获得您的手机号</div>
</div>
<div class="auth-btncard">
<!-- #ifdef MP-WEIXIN -->
<div class="btn-unok"><u-button :hair-line='false' :custom-style="customStyleUnOk" @click="showAuthorizePhone=false"> 拒绝</u-button></div>
<div class="btn-ok"><u-button :hair-line='false' :custom-style="customStyleOk" open-type="getPhoneNumber" @getphonenumber="authPhone"> 允许</u-button></div>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<div class="btn-unok"><button class="alibtn" @click="showAuthorizePhone=false"> 拒绝</button></div>
<div class="btn-ok"><button class="alibtn" style="color:#157DFB" @getAuthorize="authPhone" scope='phoneNumber' open-type="getAuthorize"> 允许</button></div>
<!-- #endif -->
</div>
</view>
</u-modal>
3. 授权头像和昵称的弹窗
<u-modal v-model="showAuthorizeUser" :show-title="false"
:show-confirm-button="false">
<view class="slot-content">
<div class="auth-card">
<div class="img">
<img class="avatar-img"
src="@/static/logo-min.png"
mode="widthFix">
</div>
<div class="title">{
{bname}}</div>
<div class="content">申请获得您的公开信息<br>昵称、头像、地区及性别）</div>
<!-- #ifdef MP-WEIXIN -->
<div style="margin-left: 100rpx;margin-right: 100rpx">
<u-form :model="user" ref="uForm">
<u-form-item label="头像">
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right">
<image class="avatar" :src="user.avatarUrl"></image>
</button>
</u-form-item>
<u-form-item label="昵称">
<input type="nickname" class="weui-input" @blur="userNameInput" placeholder="请输入昵称"/>
</u-form-item>
</u-form>
</div>
<!-- #endif -->
</div>
<div class="auth-btncard">
<!-- #ifdef MP-WEIXIN -->
<div class="btn-unok"><u-button :hair-line='false' :custom-style="customStyleUnOk" @click="showAuthorizeUser=false"> 拒绝</u-button></div>
<div class="btn-ok"><u-button :hair-line='false' :custom-style="customStyleOk" @click="authUser"> 允许</u-button></div>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<div class="btn-unok"><button class="alibtn" @click="showAuthorizeUser=false"> 拒绝</button></div>
<div class="btn-ok"><button class="alibtn" style="color:#157DFB" @getAuthorize="authUser" scope='userInfo' open-type="getAuthorize"> 允许</button></div>
<!-- #endif -->
</div>
</view>
</u-modal>
4. 逻辑部分
微信登录的逻辑
-
进入页面先静默获取code。后续需要获取code去后台换用户的手机号。打开授权手机号的弹窗
-
用户在授权手机号的弹窗点击允许后
<u-button :hair-line='false' :custom-style="customStyleOk" open-type="getPhoneNumber" @getphonenumber="authPhone"> 允许</u-button> -
按钮点击回调方法中可以获得encryptedData
-
然后拿code和encryptedData去获取用户的手机号，完成注册功能。
-
注册成功后，把返回的用户信息放入userinfo的缓存中。然后判断用户有无头像信息，如果没有就打开授权用户头像昵称的弹窗。
-
用户通过chooseAvatar的button获取微信头像或者自定义上传头像
-
用户通过nickname的input的@blur方法获取昵称。然后保存给用户
支付宝登录的逻辑
-
进入页面弹出授权手机号弹窗。用户通过点击
<button class="alibtn" style="color:#157DFB" @getAuthorize="authPhone" scope='phoneNumber' open-type="getAuthorize"> 允许</button> -
该按钮会拉起支付宝的授权手机号的底部弹窗。点击同意后
-
调用my.getAuthCode获取code，在获取code成功事件中再调用my.getPhoneNumber获取到encryptedData
-
把code和encryptedData传递给后台服务解析成手机号，从而实现用户的注册功能。
-
注册成功后把返回的用户信息放入userinfo的缓存中。然后判断用户有无头像信息，如果没有就打开授权用户头像昵称的弹窗。
-
通过点击授权获取用户信息的按钮
<button class="alibtn" style="color:#157DFB" @getAuthorize="authUser" scope='userInfo' open-type="getAuthorize"> 允许</button> -
按钮回调方法中调用my.getOpenUserInfo方法，该方法会返回用户的头像和昵称信息
代码如下
export default {
data() {
return {
user:{
avatarUrl:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
nickName:'',
},
hasUserInfo:false,
// 用户基本信息
userInfo: null,
// 微信,支付宝用户code
code: '',
// 是否弹出登录注册授权弹窗
showAuthorizeUser: false,
showAuthorizePhone: false,
}
},
onShow() {
this.getWxCode()
setTimeout(() => {
this.showAuthorizePhone = true
}, 100);
},
methods: {
// 静默获取code
async getWxCode() {
const loginResult = await uni.login()
const {
code } = loginResult[1]
this.code = code
console.log('-------------------code', code)
},
//获取昵称输入内容
userNameInput(e){
this.user.nickName = e.detail.value
},
onChooseAvatar(e) {
console.log('头像信息》')
console.log(e)
this.user.avatarUrl = e.detail.avatarUrl;
},
authUser(){
let userInfo = uni.getStorageSync('userInfo')
//#ifdef MP-WEIXIN
if(this.user.nickName==''){
this.$interactive.toast('请输入您的昵称！')
return;
}
userInfo.avatarurl = this.user.avatarUrl;
userInfo.nickname = this.user.nickName;
this.userInfo = userInfo;
uni.setStorageSync('userInfo', userInfo)
this.user.id = userInfo.id;
this.$api.saveUserInfo(this.user, res => {
this.hasUserInfo = true;
this.showAuthorizeUser = false;
},res =>{
})
//#endif
//#ifdef MP-ALIPAY
my.getOpenUserInfo({
fail: (err) => {
console.log('>>>>>>>>>>>>>>>>>err', err)
},
success: (res) => {
let userInfoAli = JSON.parse(res.response).response // 以下方的报文格式解析两层 response
if( userInfoAli.nickName =='' || userInfoAli.nickName==undefined){
userInfoAli.nickName = userInfo.phone;
}
userInfo.avatarurl = userInfoAli.avatar
userInfo.nickname = userInfoAli.nickName
this.userInfo = userInfo;
this.hasUserInfo = true;
uni.setStorageSync('userInfo', userInfo)
this.showAuthorizeUser = false;
let data = {
id:userInfo.id,
avatarUrl:userInfoAli.avatar,
nickName:userInfoAli.nickName,
province:userInfoAli.province,
city:userInfoAli.city
}
this.$api.saveUserInfo(data, res => {
},res =>{
})
}
});
//#endif
},
async authPhone(e){
let data;
let _this = this;
//#ifdef MP-WEIXIN
const {
errMsg, iv, encryptedData } = e.detail;
if (errMsg !== 'getPhoneNumber:ok') return;
data = {
code: this.code,
encryptedData: encryptedData,
iv: iv
}
this.$api.commRegister(data, res => {
if(res.data.data.avatarurl){
_this.hasUserInfo = true;
_this.userInfo = res.data.data;
}else{
_this.showAuthorizeUser = true
}
this.getLocksNum(res.data.data.id)
uni.setStorageSync('userInfo', res.data.data)
uni.setStorageSync('token', res.data.data.token)
setTimeout(() => {
_this.$interactive.toast('登陆成功')
}, 300);
})
//#endif
//#ifdef MP-ALIPAY
my.getAuthCode({
scopes: 'auth_base',
success: ({
authCode }) => {
my.getPhoneNumber({
success: (res) => {
data = {
code: authCode,
encryptedData: res.response
}
this.$api.commRegister(data, res => {
if(res.data.data.avatarurl){
_this.hasUserInfo = true;
_this.userInfo = res.data.data;
}else{
_this.showAuthorizeUser = true
}
uni.setStorageSync('userInfo', res.data.data)
uni.setStorageSync('token', res.data.data.token)
setTimeout(()=>{
this.getLocksNum(res.data.data.id)
_this.$interactive.toast('登陆成功')
},300)
console.log('---------登陆成功')
})
},
fail: (err) => {
console.log('getPhoneNumber_fail');
}
});
},
});
//#endif
this.showAuthorizePhone = false
},
openAuth(){
let userInfo = uni.getStorageSync('userInfo')
console.log(userInfo)
if(userInfo){
this.showAuthorizeUser = true;
}else{
this.showAuthorizePhone = true;
}
}
}
}
5. 结尾
下一篇：springboot微信支付宝双端兼容授权手机号后台接口（待完善）