广州网站设计推荐刻,南宁品牌网站设计公司,我想做京东网站淘宝怎么做的,云匠网app前面我出过两期博客关于小程序授权登录,利用php实现一个简单的小程序授权登录并存储授权用户信息到数据库的完整流程。无奈#xff0c;小程序官方又整幺蛾子了。wx.getUserInfo接口收回#xff0c;wx.getUserProfile接口也不让用。导致我的个人小程序#xff1a;梦缘 的授权… 前面我出过两期博客关于小程序授权登录,利用php实现一个简单的小程序授权登录并存储授权用户信息到数据库的完整流程。无奈小程序官方又整幺蛾子了。wx.getUserInfo接口收回wx.getUserProfile接口也不让用。导致我的个人小程序梦缘 的授权登录得改。所以这篇博客专门针对授权登录中头像昵称的使用进行说明。内附源码 1.问题定位 lz的小程序梦缘 技术栈是基于phpuniappvant 写的之前因为偷懒没写后台管理然后php用的也是tp5,没有走管理框架导致后端代码不规范后面就因为一些特殊原因就重构了一下。然后也就理所当然的遇到了授权登录头像昵称的问题。
之前走的wx.getUserProfile也能用但是获取的头像都变成了灰色头像昵称统一为微信用户。作为强迫症患者的我肯定是不允许的所以必须解决。但是之前的代码我又不想删毕竟都是自己一行一行敲出来的我更加偏向于加代码。 这是之前授权登录得代码直接调用wx.getUserProfile即可。
2.解决思路 前面提到过之前的授权登录代码依旧是可以用的只是头像和昵称统一是灰白色和微信用户。再结合前面官方说的基础版本库的影响基础版本库低于2.21.2wx.getUserProfile返回的就是正常的头像昵称高于2.21.2的话就要使用昵称头像填写功能把这两个值作为参数传递给后端。 既然如此我之前的代码就可以保留了在传参时额外增加nickname和avatar参数即可。后端针对是否有这两个参数做针对性处理。而这两个参数就需要前端利用小程序昵称头像的填写来获取了。
3.源码解析
下面直接公布授权登录得代码login.vue
这里通过动态的获取当前小程序基础库来决定是否调用微信的头像昵称填写功能。然后再统一调用授权登录接口。后端根据动态动态保存。
templateviewviewview classheaderview classuserinfo-avataropen-data typeuserAvatarUrl langzh_CN //view/viewview classcontentview申请获取以下权限/viewtext获得你的公开信息(昵称头像等)/text/viewbutton classbottom typeprimary clicklogin v-ifischeck 授权登录/buttonbutton classbottom typeprimary clicklogin_zheshow v-else授权登录/buttonbtnlogin :zheshowzheshow v-ifzheshow //view/view
/templatescriptimport btnlogin from /components/butlogin/butlogin;const context require(../../context/ggyzContext.js);export default {data() {return {code:,ischeck:true,zheshow:false,nickname:,avatar:,}},components:{btnlogin},onShow() {var thatthis;wx.login({success(res) {console.log(code:,res.code);if (res.code) {that.coderes.code;} else {console.log(登录失败 res.errMsg)}}})var {SDKVersion} wx.getSystemInfoSync()// 判断是否支持getUserProfile()获取头像昵称var compareRes this.compareVersion(SDKVersion, 2.21.2);// 不支持if (compareRes ! -1) {console.log(不支持getUserProfile()获取头像)this.ischeck false;return}// 支持console.log(支持getUserProfile()获取头像)},methods: {login_zheshow(){this.zheshow true;},loset(Logon_Credentials){console.log(Logon_Credentials,登录信息);this.avatarLogon_Credentials.active;this.nicknameLogon_Credentials.nickname;this.login();},close(){this.zheshowfalse;},/*** 版本比较* v1 v2 返回 0或1 否则 -1* param {String} v1* param {String} v2 */compareVersion (v1, v2) {v1 v1.split(.)v2 v2.split(.)const len Math.max(v1.length, v2.length)while (v1.length len) {v1.push(0)}while (v2.length len) {v2.push(0)}for (let i 0; i len; i) {const num1 parseInt(v1[i])const num2 parseInt(v2[i])if (num1 num2) {return 1} else if (num1 num2) {return -1}}return 0},login(){var thatthis;wx.getUserProfile({desc: 用于完善会员资料,success: e {console.log(授权信息,e);//发起网络请求context.request({url: context.constant.url.login,method:POST,data: {encryptedData: e.encryptedData,iv: e.iv,code: that.code,nickname:that.nickname,avatar:that.avatar},success(res) {console.log(res.data);if(res.data.code1){uni.setStorageSync(userInfo,res.data.data);uni.setStorageSync(token,res.data.data.token);uni.setStorageSync(loginFlag,{expireTime:res.data.data.expiretime})uni.switchTab({url:/pages/my/my})}else{setTimeout( () {uni.showToast({title: res.data.msg,icon: none,});setTimeout( () {wx.hideToast();},2000)},0);}}})}})}}}
/scriptstylepage{background: #FFFFFF;}
.header {margin: 90rpx 90rpx 90rpx 50rpx;border-bottom: 1px solid #ccc;text-align: center;width: 650rpx;height: 300rpx;line-height: 450rpx;display: flex;justify-content: center;align-items: center;
}.header .userinfo-avatar {width: 200rpx;height: 200rpx;margin-bottom: 80rpx;
}.content {margin-left: 50rpx;margin-bottom: 90rpx;
}.content text {display: block;color: #9d9d9d;margin-top: 40rpx;
}.bottom {border-radius: 80rpx;margin: 70rpx 50rpx;font-size: 35rpx;
}
/stylebtnlogin.vue昵称填写组件
tips:这里用到了vant的弹窗记得uni-app项目是否引入了该组件库。别忘了在pages.json声明引用
templateviewvan-popup positionbottom :showzheshow1 roundview classzheshow view classcen_terview classbox_Atview classbox_At_text获取您的昵称、头像、手机号/viewview classbox_At_co获取用户头像、昵称、手机号信息主要用于完善个人资料向用户提供更好使用体验/viewview classbox_B styleborder-top:1px solid #f3f3f3 ;view classacvter头像/viewbutton v-if!active classacvter_all open-typechooseAvatar chooseavataronChooseAvatarview classmast请选择头像/view/buttonview v-ifactive classimgimage :srcactive /image/view/viewview classbox_Bview classacvter昵称/viewinput classacvter_all typenickname :valuenickname blurbindblur placeholder请输入昵称 //viewview classBrn_Sview classbtn_btns clickcolse取消/viewbutton classbtn clickbtns stylebackground-color: #22ac38 !important;color: #ffffff !important;view classbtns保存/view/button/view/view/view/view/van-popup/view
/templatescriptexport default {props:[zheshow],data() {return {on_zheshows:false,zheshow1:false,active:,nickname:}},mounted() {this.zheshow1this.zheshow;},watch:{zheshow(zheshow,oldValue) {this.zheshow1this.zheshow},},methods: { colse(){console.log(取消)this.$parent.close();},onChooseAvatar(e) {let that thisuni.getFileSystemManager().readFile({filePath: e.detail.avatarUrl, //选择图片返回的相对路径encoding: base64, success: (res) {let base64s data:image/jpeg;base64, res.datathat.active base64s},fail: (res) reject(res.errMsg), });},bindblur(e){this.nickname e.detail.value},btns(e){if(this.active){uni.showToast({title:请选择上传头像,icon:none})return}if(this.nickname){uni.showToast({title:请填写昵称,icon:none})return}this.$parent.loset({nickname:this.nickname,active:this.active}) // 信息传递父组件中}}}
/scriptstyle langscss scoped.zheshow{width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);position: fixed;top: 0;left: 0;display: flex;align-items: center;align-items: flex-end;.mast{margin-top: 6rpx;}.Brn_S{width: 70%;height: 100rpx;display: flex;align-items: center;justify-content: space-between;margin: 10rpx auto;}.btn_btns{width: 300rpx;height: 80rpx;background: antiquewhite; display: flex;align-items: center;justify-content: center; border-radius: 10rpx; margin-right: 70rpx;background-color: #fafafa;color: #39B54A;}.imgs{position: absolute;right: 6%;width: 32rpx;height: 32rpx;}.img{width: 90rpx;height: 90rpx;border-radius: 50%;margin-left: 80rpx;image{width: 100%;height: 100%;border-radius: 50%;}}.cen_ter{width: 100%;height: 600rpx;border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;background-color: #FFFFFF;display: flex;align-items: center;justify-content: center;.box_At{width: 90%;height: 92%;margin-top: 20rpx;display: flex;flex-direction: column;.box_At_text{font-weight: bold;font-size: 30rpx}.box_At_co{font-size: 28rpx;color: #ababab;margin-top: 24rpx;}.box_B{width: 100%;height: 120rpx;border-bottom: 1px solid #f3f3f3;display: flex;align-items: center;margin-top: 12rpx;.acvter_all{font-size: 28rpx;color: #ababab;margin-left: 80rpx;}}.btn{width:300rpx;margin: 35rpx auto;height: 80rpx;display: flex;align-items: center;justify-content: center;background-color: #39B54A;color: #FFFFFF;border-radius: 10rpx;font-size: 30rpx;}}}}button {border-radius: 30rpx;height: 80rpx !important;padding-left: 0!important ;padding-right: 0!important ; background-color: rgba(0,0,0,0) !important;color: #ababab !important;font-family: PingFang SC !important;}button:after {top: 0;left: 0; border: 1px solid rgba(0,0,0,0) !important; -webkit-transform: scale(.5);transform: scale(.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; box-sizing: border-box; border-radius: 10px;}
/style组件效果
