微信支付宝双端兼容获取手机号头像昵称
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微信支付宝双端兼容授权手机号后台接口（待完善）
