更新记录

1.0.1（2025-03-10） 下载此版本

增加 custom 参数控制是否使用 hideTabBar 隐藏原生tab

1.0.0（2025-03-06） 下载此版本

微信小程序获取头像昵称组件

平台兼容性

nx-userinfo

示例

<template>
    <view>
        <button @click="open">获取头像昵称</button>
        <nx-userinfo v-if="show" :data="userinfo" @confirm="handleConfirm" @cancel="handleCancel" :custom="true"></nx-userinfo>
    </view>
</template>

<script setup>
    import {
        onMounted,
        ref
    } from "vue";

    const userinfo = ref({
        nickname: '',
        avatarUrl: ''
    })

    const show = ref(false)
    const open = () => {
        show.value = true
    }

    const handleConfirm = (data) => {
        console.log(data);
        show.value = false
    }
    const handleCancel = () => {
        show.value = false
    }
</script>

<style>

</style>

核心逻辑

<template>
    <view class="nx-userinfo">
        <view class="container" :class="{ 'slide-up': visible }">
            <view class="header-info">
                获取您的微信昵称，头像申请
            </view>
            <view class="avatar-box">
                <button open-type="chooseAvatar" @chooseavatar="chooseAvatar">
                    <image
                        :src="userInfo.avatarUrl || 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'">
                    </image>
                    <text>选择头像</text>
                </button>
            </view>
            <view class="nickname-box">
                <input type="nickname" v-model="userInfo.nickname" @change="getNickname" placeholder="点击获取昵称" />
            </view>
            <view class="footer">
                <button class="btn" type="primary" @click="confirm">同意</button>
                <button @click="cancel">拒绝</button>
            </view>
        </view>
    </view>
</template>

主要使用了 open-type="chooseAvatar" 和 type="nickname" ，为了少引用组件，自己补充了动画逻辑，也方便自定义

<script>
    export default {
        props: {
            data: {
                type: Object,
                default: () => {
                    return {
                        nickname: '',
                        avatarUrl: ''
                    }
                },
            },
        },
        data() {
            return {
                visible: false,
                userInfo: {
                    nickname: '',
                    avatarUrl: ''
                }
            }
        },
        mounted() {
            this.userInfo = this.data
            this.showModal()
        },
        methods: {
            showModal() {
                this.visible = true
                uni.hideTabBar()
            },
            closeModal(callback) {
                this.visible = false
                setTimeout(() => {
                    uni.showTabBar()
                    callback()
                }, 300)
            },
            chooseAvatar(e) {
                this.userInfo.avatarUrl = e.detail.avatarUrl
            },
            getNickname(e) {
                this.userInfo.nickname = e.detail.value;
            },
            confirm() {
                this.closeModal(() => {
                    this.$emit('confirm', this.userInfo)
                })
            },
            cancel() {
                this.closeModal(() => {
                    this.$emit('cancel')
                })
            }
        }
    };
</script>

获取到图片是临时地址，上传逻辑可以用 uni.uploadFile 方法自己处理