uniapp 微信小程序 open-type=“chooseAvatar“ 获取微信用户信息-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 微信小程序 open-type=“chooseAvatar“ 获取微信用户信息。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

效果图：
uniapp 微信小程序 open-type=“chooseAvatar“ 获取微信用户信息

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)
			}
		})
	})
}

二、获取微信昵称

效果图：
uniapp 微信小程序 open-type=“chooseAvatar“ 获取微信用户信息

html：

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

js：文章来源地址https://www.toymoban.com/news/detail-503194.html

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

到了这里，关于uniapp 微信小程序 open-type=“chooseAvatar“ 获取微信用户信息的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

uniapp 微信小程序 open-type=“chooseAvatar“ 获取微信用户信息

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2