微信小程序获取用户信息更新解决方案

ゝ一纸荒年。 2022-11-16 13:43 500阅读 0赞

微信小程序获取用户头像和昵称更新了，以下代码是兼容旧版本微信和新版本微信的解决方案，仅供参考

直接上代码

<template>
    	
    	<view class="UserInfo_main">
    		<div class="headArea" v-if="isLogin">
    			<div class="nameArea" @click="goDimesion">
    				<span class="name">{
       {userInfo.nickname}}</span>
    				<span class="coin">{
       {userInfo.gold||0}}</span>
    				<div class="headImgBg">
    					<div class="headImgBgWit">
    						<image :src="userInfo.avatar" class="headimg">
    						</image>
    						
    					</div>
    				</div>
    				<div class="levelArea">
    					<image :src="imgLevelBg" class="levelAreaBg">
    						<span class="levelNum">{
       {userInfo.rank_level&&userInfo.rank_level.level||1}}</span>
    					</image>
    				</div>
    			</div>
    		</div>
    
    		
    		<div class="headArea" v-if="!isLogin">
    			<div class="nameArea">
    				<span class="nameNotLogin flexdis">
    					<button class="goLogin" lang="zh_CN" v-if="canIUseGetUserProfile"
    						@click="getUserProfile">点击授权登录</button>
    					<button class="goLogin" v-if="!canIUseGetUserProfile" open-type="getUserInfo" lang="zh_CN"
    						@getuserinfo="onGotUserInfo">点击授权登录</button>
    					<image :src="arrow" v-if="showArrow" class="arrowImg">
    					</image>
    				</span>
    				<div class="headImgBg">
    					<div class="headImgBgWit">
    						<image :src="defaultHeadImg" class="headimg">
    						</image>
    					</div>
    				</div>
    			</div>
    			
    		</div>
    
    	</view>
    </template>
    
    <script>
    	function 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
    	}
    	export default {
    		props: ['rankInfo', 'showArrow'],
    		data() {
    			return {
    				canIUseGetUserProfile: false,
    				isLogin: false,
    				userInfo: {},
    				imgLevelBg: this.$config.gameImagesUrl + '/imgLevelBg.png',
    				arrow: this.$config.gameImagesUrl + '/arrow.png',
    				defaultHeadImg: this.$config.gameImagesUrl + '/defaultHeadImg.jpg',
    			}
    		},
    		asynconHide() {},
    		async mounted() {
    			this.$common.Init.call(this);
    			const version = wx.getSystemInfoSync().SDKVersion
    
    			if (compareVersion(version, '2.16.0') >= 0) {
    				this.canIUseGetUserProfile = true;
    			}
    			// if (wx.getUserProfile) this.canIUseGetUserProfile = true;
    			console.log('微信基础库版本号',version,',是否兼容wx.getUserProfile', this.canIUseGetUserProfile)
    
    			this.userInfo = await this.getUserInfo()
    			this.isLogin = uni.getStorageSync('userInfo') ? true : false
    		},
    		methods: {
    			goDimesion() {
    				this.$navTo.navigateTo({
    					url: '/pages/dimesion/dimesion'
    				})
    			},
    			getUserProfile() {
    				wx.getUserProfile({
    					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    					success: res => {
    						console.log('getUserProfile-res', res)
    						this.to_login(res)
    					},
    					fail: err => {
    						console.log('err', err)
    					}
    				})
    			},
    			// 用户信息登录上传信息给接口
    			to_login(data) {
    				console.log('用户信息登录上传信息给接口1', data)
    				data.userToken = wx.getStorageSync('userToken');
    				this.$request(this.$api.user.wechatXcxSetUserData, data).then(async (res) => {
    					console.log('登录返回', JSON.stringify(res))
    					if (res.code == 0) {
    						this.userInfo = await this.getUserInfo()
    						this.isLogin = true
    					}
    				})
    			},
    			onGotUserInfo(e) {
    				var errMsg = e.detail.errMsg
    				if (errMsg === 'getUserInfo:ok') {
    					var detail = e.detail
    					console.log('旧版本-detail', detail)
    				    this.to_login(detail)
    				}
    			},
    		},
    	}
    </script>
    
    <style lang="scss" scoped>
    	
    </style>

![20210409193554983.png][]![20210409193523896.png][]

[20210409193554983.png]: https://img-blog.csdnimg.cn/20210409193554983.png
[20210409193523896.png]: /images/20221022/7bc699aee02741cba652151951470bdb.png