wxAuth 微信授权组件 | uView Next - 全面兼容 nvue 的 uni-app 生态框架

# wxAuth 微信授权组件新

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

# 平台差异说明

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

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

# 基本使用

通过以下属性配置组件：

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

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

<script>
export default {
	data() {
		return {
			show: false,
			logo: '/static/logo.png',
			title: '我的应用',
			content: '获取您的昵称、头像',
			tips: '以便为您提供更优质的服务',
			confirmText: '确认授权'
		};
	},
	methods: {
		onConfirm(data) {
			console.log('授权成功：', data);
			// data.avatar - 用户头像路径
			// data.nickname - 用户昵称
			this.show = false;
		},
		onClose() {
			this.show = false;
		}
	}
};
</script>
✅ Copy success!

# 自定义样式配置

可以通过以下属性自定义组件样式：

round: 设置弹窗圆角大小
closeable: 是否显示关闭按钮
maskCloseable: 是否允许点击遮罩关闭

<template>
	<view>
		<u-wx-auth 
			:show="show" 
			:round="20"
			:closeable="true"
			:mask-closeable="true"
			@confirm="onConfirm"
		></u-wx-auth>
		<u-button @click="show = true">自定义样式授权</u-button>
	</view>
</template>
✅ Copy success!

# 获取用户头像

组件会自动处理头像选择，通过 chooseAvatar 事件可以获取用户选择的头像：

<template>
	<view>
		<u-wx-auth 
			:show="show" 
			@choose-avatar="onChooseAvatar"
			@confirm="onConfirm"
		></u-wx-auth>
	</view>
</template>

<script>
export default {
	methods: {
		onChooseAvatar(avatarPath) {
			console.log('用户选择头像：', avatarPath);
			// 可以在这里处理头像上传等逻辑
		},
		onConfirm(data) {
			console.log('最终授权数据：', data);
		}
	}
};
</script>
✅ Copy success!

# 表单验证

组件内置了基本的表单验证，只有在头像和昵称都填写完整时，确认按钮才会启用：

<template>
	<view>
		<u-wx-auth 
			:show="show" 
			@confirm="onConfirm"
		></u-wx-auth>
	</view>
</template>

<script>
export default {
	methods: {
		onConfirm(data) {
			// 验证通过后才会触发此事件
			uni.showToast({
				title: '授权成功',
				icon: 'success'
			});
			this.show = false;
		}
	}
};
</script>
✅ Copy success!

# 页面源码地址

页面源码地址

github

gitee

# API

# Props

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

# Events

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

# Slots

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

# 注意事项

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

# 相关链接

← 更新日志 Sidebar 侧边栏 →