更新记录

0.2.0（2025-05-21）

• 新增主题色自定义功能
• 新增遮罩层背景色自定义功能
• 新增遮罩层模糊效果控制功能
• 优化样式绑定方式，提升兼容性

0.1.0（2025-05-21）

[0.1.0] - 2025-05-21

新增

• 首次发布
• 支持一键登录
• 支持完善个人信息
• 支持头像上传
• 支持手机号获取

平台兼容性

uni-app

其他

login-popup 登录弹窗组件

一个功能完善的登录弹窗组件，支持一键登录、完善个人信息等功能。

功能特点

• 支持一键登录
• 支持完善个人信息
• 支持头像上传
• 支持手机号获取
• 支持主题色自定义
• 支持遮罩层背景色自定义
• 支持遮罩层模糊效果控制

安装方式

方式一：通过 uni_modules 安装

在插件市场找到本插件，点击"使用 HBuilderX 导入插件"。

方式二：通过 npm 安装

复制代码npm install @dcloudio/uni-ui

基本用法

复制代码<template>
  <login-popup
    :show="show"
    theme-color="#FF5733"
    :enable-mask-blur="true"
    mask-background-color="rgba(0, 0, 0, 0.7)"
    @success="onLoginSuccess"
    @closed="onPopupClosed"
  />
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    onLoginSuccess(data) {
      console.log('登录成功', data)
    },
    onPopupClosed() {
      console.log('弹窗关闭')
    }
  }
}
</script>

API

Props

Events

主题定制

组件支持通过以下属性进行主题定制：

复制代码<login-popup
  theme-color="#FF5733"  <!-- 自定义主题色 -->
  :enable-mask-blur="true"  <!-- 是否启用遮罩层模糊效果 -->
  mask-background-color="rgba(0, 0, 0, 0.7)"  <!-- 自定义遮罩层背景色 -->
/>

注意事项

1. 组件依赖微信小程序的开放能力，请确保在微信小程序环境中使用
2. 使用头像上传功能需要在小程序管理后台配置相应的权限
3. 使用手机号获取功能需要在小程序管理后台配置相应的权限

平台兼容性

常见问题

1. Q: 为什么无法获取用户头像？ A: 请检查是否已在小程序管理后台开启"获取用户头像"权限

2. Q: 为什么无法获取用户昵称？ A: 请检查是否已在小程序管理后台开启"获取用户昵称"权限

3. Q: 为什么无法获取手机号？ A: 请检查是否已在小程序管理后台开启"获取手机号"权限

更新日志

详见 changelog.md

⚠️ 重要提示

使用前必读

1. 确保已在小程序管理后台配置了必要的用户信息获取权限
2. 在真机调试时，部分接口可能需要真机环境才能正常使用
3. 不同平台的小程序可能需要不同的权限配置，请参考各平台的开发文档

使用说明

1. 安装组件

在插件市场下载并导入项目

2. 配置小程序权限

在使用组件前，需要在小程序管理后台配置以下权限：

微信小程序

1. 登录小程序管理后台
2. 进入"开发管理" -> "接口设置"
3. 开启以下接口权限：
   • 获取用户头像
   • 获取用户昵称
   • 获取手机号

支付宝小程序

1. 登录支付宝小程序管理后台
2. 进入"设置" -> "开发设置"
3. 开启以下接口权限：
   • 获取用户头像
   • 获取用户昵称
   • 获取手机号

其他小程序

请参考各平台的小程序开发文档，配置相应的用户信息获取权限。

3. 在页面中使用

复制代码<template>
    <view>
        <button @click="openLogin">打开登录弹窗</button>
        <login-popup
            :show.sync="showLogin"
            :personal="isPersonal"
            :user="userInfo"
            :skipCompleteInfo="false"
            @success="onLoginSuccess"
            @closed="onLoginClosed"
        />
    </view>
</template>

<script>
export default {
    data() {
        return {
            showLogin: false,
            isPersonal: false,
            userInfo: {}
        }
    },
    methods: {
        openLogin() {
            this.showLogin = true;
        },
        onLoginSuccess(data) {
            console.log('登录成功：', data);
            // 处理登录成功逻辑
        },
        onLoginClosed() {
            console.log('弹窗关闭');
        }
    }
}
</script>

API 说明

Props