本组件用于微信小程序中获取用户头像和昵称的授权弹窗。
本组件基于微信小程序的开放能力，提供统一的用户信息获取界面，支持头像选择和昵称输入。

平台差异说明

App（vue）	App（nvue）	H5	小程序
×	×	×	√

注意： 本组件仅支持微信小程序平台，其他平台无法使用相关功能。

基本使用

通过以下属性配置组件：

• show: 控制组件的显示与隐藏（双向绑定）
• logo: 设置应用logo图片，注意图片需要使用网络地址
• title: 设置应用标题
• content: 设置授权说明内容
• tips: 设置提示信息
• confirmText: 设置确认按钮文字

<template>
	<view>
		<u-wx-auth
			ref="wxAuthRef"
			:show="show" 
			:logo="logo" 
			:title="title" 
			:tips="tips"
			:confirm-text="confirmText"
			@choose-avatar="onChooseAvatar"
			@confirm="onConfirm"
			@close="onClose"
		></u-wx-auth>
		<un-button @click="show = true">打开微信授权</un-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			logo: 'https://uview-unix.d3u.cn/images/logo.png',
			title: '我的应用',
			confirmText: '确认授权',

			avatarUrl: ''  //方法2 演示
		};
	},
	methods: {
		onChooseAvatar(url) {
			console.log('用户选择头像：', url);
			// 可以在这里处理头像上传等逻辑,将图片上传到服务器进行存储


			//方法1：上传完成后，通过下面的方法把图片的地址传到 onConfirm 事件中
			this.$refs.wxAuthRef.avatar = "头像的url路径";

			//方法2：在data中定义一个变量用来存储上传后的图片路径
			this.avatarUrl =  "头像的url路径"
		},
		onConfirm(data) {

			console.log('授权成功：', data);
			// data.avatar - 用户头像路径，如果不调用onChooseAvatar中的方法1或者方法2，则avatar是临时文件的路径
			// data.nickname - 用户昵称
			this.show = false;
		},
		onClose() {
			this.show = false;
		}
	}
};
</script>

页面源码地址

页面源码地址

 github  gitee

API

Props

参数	说明	类型	默认值
show	是否显示授权弹窗	Boolean	false
logo	应用logo图片地址	String	''
title	应用标题	String	''
showHeader	是否显示头部区域	Boolean	true
content	授权说明内容	String	'获取您的昵称、头像'
tips	提示信息	String	'以便为您提供更优质的服务'
round	弹窗圆角大小	String | Number	10
closeable	是否显示关闭按钮	Boolean	true
maskCloseable	是否允许点击遮罩关闭	Boolean	false
confirmText	确认按钮文字	String	'保存'

Events

事件名	说明	回调参数
confirm	用户确认授权时触发	Object:
close	关闭弹窗时触发	-
chooseAvatar	用户选择头像时触发	String: avatarPath

Slots

插槽名	说明
默认插槽	自定义弹窗内容

注意事项

1. 平台限制：本组件仅支持微信小程序平台，其他平台无法使用
2. 权限要求：需要在小程序配置中声明相关权限

相关链接

• 微信小程序用户信息获取