关于小程序获取微信用户信息:
1、open-type=“getUserInfo”在2021年4月13日停用
2、wx.getUserInfo 在 2021年4月28日停用
3、wx.getUserProfile 在2022年11月8日停用

以下是使用open-type=“chooseAvatar” 的uniapp写法哦:
一、获取微信头像

效果图:
在这里插入图片描述

html:

<button class="button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
	   <image class="avatar" :src="infoObj.avatar == '' ? '@/static/images/xishi.jpg' : infoObj.avatar"></image>
</button>

js:

onChooseAvatar(e) {
		const avatarUrl = e.detail.avatarUrl // 此处是头像的临时路径
		// 需要后端配合,获得线上的地址
		uploadFile(avatarUrl).then(res => {
				console.log('上传图片成功')
				const result = JSON.parse(res.data)
				this.editInfoObj.avatar = 'http://' + result.data
				// 调用修改头像的方法
				this.editUserInfo(this.editInfoObj)
		}).catch(err => {
				console.log('上传图片失败', err)
		})
	},

因为上传文件,项目有多个使用场景,所以简单封装了,
uploadFile的封装:

import { baseURL } from '@/utils/request/env'
import { md5Libs } from '@/utils/request/md5'

/**
 * 上传文件
 * @param {string} filePath // 临时目录
 */

export function uploadFile(filePath) {
	
	// 添加token
	let token = uni.getStorageSync('token')
	
	// (是封装MD5加密时的参数格式,可忽略~)
	let options = {
		data: {},
		url: baseURL + 'public/uploadFile'
	}
	// 添加签名
	let sign = md5Libs(options)
	let optionsData = Object.assign({}, options.data)
	optionsData.sign = sign
	
	return new Promise((resolved, rejected) => {
		uni.uploadFile({
			url: options.url,
			filePath: filePath,
			name: 'file',
			header: {
				'content-type' : 'multipart/form-data',
				'token': token
			},
			formData: optionsData,
			success: (res) => {
				if (res.statusCode == 200) {
					resolved(res)
				} else {
					rejected(res)
				}
			},
			fail: (err) => {
				rejected(err)
			}
		})
	})
}

二、获取微信昵称

效果图:
在这里插入图片描述

html:

<input type="nickname" class="input" :value="editInfoObj.nickName" @blur="bindblur"/>

js:

bindblur(e) {
   this.editInfoObj.nickName = e.detail.value // 获取微信昵称
}
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐