外观
wxAuth 微信授权组件
约 771 字大约 3 分钟
2025-10-31
本组件用于微信小程序中获取用户头像和昵称的授权弹窗。
本组件基于微信小程序的开放能力,提供统一的用户信息获取界面,支持头像选择和昵称输入。
平台差异说明
| 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>页面源码地址
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
| 插槽名 | 说明 |
|---|---|
| 默认插槽 | 自定义弹窗内容 |
注意事项
- 平台限制:本组件仅支持微信小程序平台,其他平台无法使用
- 权限要求:需要在小程序配置中声明相关权限
