更新记录

1.0.4（2025-08-26）

1.0.3（2025-08-25）

1.0.2（2025-08-24）

修复安装uni-modules问题

平台兼容性

uni-app(4.07)

uni-app x(4.07)

其他

一键微信登录

一个灵活的微信登录组件，支持静默登录、用户信息获取等功能。

重要更新: 当前版本只需要 2个接口 即可实现完整功能。

📋 授权说明

本组件采用双重授权模式：

• 普通授权版（免费）: 可直接使用组件，支持商业项目
• 源码授权版（收费）: 提供完整源代码和技术支持

详细授权信息请查看 LICENSE 文件。

功能特性

• ✅ 一键快捷登录
• ✅ 静默登录（自动登录）
• ✅ 用户信息获取
• ✅ 灵活的API配置
• ✅ 内部/外部处理模式
• ✅ 自动跳转控制
• ✅ 完整的错误处理
• ✅ 三种使用场景（简化版、完整版、外部处理版）
• ✅ 自定义按钮文字和图标
• ✅ 加载动画效果
• ✅ 按钮居中显示
• ✅ 跨平台兼容（uniapp & uniapp-x）

最新更新

v1.0.3 (最新)

• 🎨 UI优化: 修复按钮居中显示问题，确保文字不被截断
• ⚡ 加载动画: 添加自定义加载动画效果，提升用户体验
• 🎯 自定义文字: 支持自定义登录按钮、成功提示、跳转按钮的文字和图标
• 🔧 样式修复: 优化按钮样式，确保在uniapp和uniapp-x平台上一致显示
• 📱 兼容性: 增强跨平台兼容性，修复uniapp-x特有的样式问题

v1.0.2

• 插件支持直接安装到uni-modules

v1.0.1

• 调整目录结构适配uni-modules

v1.0.0

• 重大更新: 简化接口需求，现在只需要2个接口
• 移除: getUserProfile 后端接口，直接使用微信API
• 优化: 外部处理模式的事件参数结构
• 新增: 三种使用场景的详细说明
• 重命名: 组件名改为"一键微信登录"

基本使用

简化版配置（只传递微信登录接口）

<template>
  <one-wechat-login
    :silentLogin="true"
    :autoRedirect="true"
    :showGetUserInfo="false"
    @init-api="onInitApi"
    @login-success="onLoginSuccess"
    @login-error="onLoginError"
  />
</template>

<script setup>
import { loginAPI } from '@/service/auth'

const onInitApi = (callback) => {
  callback({
    wechatLogin: loginAPI
    // 不传递updateUserInfo，插件会只更新本地用户信息
  })
}

const onLoginSuccess = (token, userInfo) => {
  console.log('登录成功:', token, userInfo)
}

const onLoginError = (error) => {
  console.error('登录失败:', error)
}
</script>

完整版配置（传递两个接口）

<template>
  <one-wechat-login
    :silentLogin="true"
    :autoRedirect="true"
    :showGetUserInfo="true"
    @init-api="onInitApi"
    @login-success="onLoginSuccess"
    @login-error="onLoginError"
  />
</template>

<script setup>
import { loginAPI, updateUserInfoAPI } from '@/service/auth'

const onInitApi = (callback) => {
  callback({
    wechatLogin: loginAPI,
    updateUserInfo: updateUserInfoAPI
  })
}

const onLoginSuccess = (token, userInfo) => {
  console.log('登录成功:', token, userInfo)
}

const onLoginError = (error) => {
  console.error('登录失败:', error)
}
</script>

自定义按钮文字和图标

<template>
  <one-wechat-login
    :silentLogin="false"
    :autoRedirect="true"
    :showGetUserInfo="true"
    login-text="开始登录"
    login-icon="🎯"
    success-text="🎉 登录成功！即将跳转到个人中心"
    redirect-text="立即跳转"
    redirect-icon="🚀"
    redirect-url="/pages/user/profile"
    @init-api="onInitApi"
    @login-success="onLoginSuccess"
  />
</template>

自定义按钮圆角

<template>
  <one-wechat-login
    :silentLogin="false"
    :autoRedirect="true"
    :showGetUserInfo="true"
    :borderRadius="'50rpx'"
    :fontSize="'32rpx'"
    :iconBgColor="'#1890ff'"
    login-text="圆角登录按钮"
    login-icon="🔐"
    @init-api="onInitApi"
    @login-success="onLoginSuccess"
  />
</template>

外部处理模式（不需要配置任何接口，全部外部处理请求）

<template>
  <one-wechat-login
    :externalHandling="true"
    :silentLogin="false"
    :showGetUserInfo="true"
    @external-login="onExternalLogin"
    @external-update-user-info="onExternalUpdateUserInfo"
  />
</template>

<script setup>
const onExternalLogin = async (data, callback) => {
  const { code, userProfileData } = data

  try {
    // 完全自定义登录逻辑
    const response = await uni.request({
      url: 'https://your-api.com/wechat/login',
      method: 'POST',
      data: {
        wechatCode: code,
        platform: 'miniprogram',
        userProfileData: userProfileData,
        customParam: '自定义参数'
      }
    })

    if (response.statusCode === 200) {
      // 通过回调函数返回成功结果
      callback({
        success: true,
        token: response.data.token,
        userData: response.data.user
      })
    } else {
      callback({
        success: false,
        error: response.data.message
      })
    }
  } catch (error) {
    callback({
      success: false,
      error: error.message
    })
  }
}

const onExternalUpdateUserInfo = async (data, callback) => {
  try {
    // 完全自定义更新用户信息逻辑
    const response = await uni.request({
      url: 'https://your-api.com/user/update',
      method: 'PUT',
      data: {
        userId: data.openId,
        profile: data.userInfo
      }
    })

    if (response.statusCode === 200) {
      callback({
        success: true,
        data: response.data
      })
    } else {
      callback({
        success: false,
        error: response.data.message
      })
    }
  } catch (error) {
    callback({
      success: false,
      error: error.message
    })
  }
}
</script>

API 配置

必需接口

• wechatLogin: 微信登录接口，接收code参数，返回token和用户信息

可选接口

• updateUserInfo: 更新用户信息接口

已移除接口

• getUserProfile: 不再需要后端接口，直接使用微信的 uni.getUserProfile()

三种使用场景

1. 简化版 - 1个接口

• 适用场景: 只需要微信登录功能，用户信息更新使用本地存储
• 配置: 只传递 wechatLogin 接口
• 特点: 配置简单，功能基础

2. 完整版 - 2个接口

• 适用场景: 需要完整的登录和用户信息更新功能
• 配置: 传递 wechatLogin 和 updateUserInfo 接口
• 特点: 功能完整，支持后端用户信息更新

3. 外部处理版 - 0个接口

• 适用场景: 需要完全自定义的登录和用户信息处理逻辑
• 配置: 不传递任何接口，通过事件处理
• 特点: 最大灵活性，完全自定义

Props 配置

事件

样式特性

按钮居中显示

• 自动居中显示，确保在不同屏幕尺寸下都能正确显示
• 文字不会被截断，完整显示所有内容
• 支持自定义宽度和最大宽度

按钮圆角配置

• 支持统一配置所有按钮的圆角半径
• 通过 borderRadius 属性设置，默认值为 30rpx
• 支持任意rpx值，如 50rpx、100rpx 等
• 所有按钮（登录、成功、跳转）都会应用相同的圆角设置

加载动画

• 登录过程中显示旋转的沙漏图标
• 文字动态切换为"登录中..."
• 提供良好的用户反馈

跨平台兼容

• 同时支持 uniapp 和 uniapp-x
• 自动适配不同平台的样式差异
• 确保功能在所有平台上一致

更新日志

v1.0.3 (最新)

• 🎨 UI优化: 修复按钮居中显示问题，确保文字不被截断
• ⚡ 加载动画: 添加自定义加载动画效果，提升用户体验
• 🎯 自定义文字: 支持自定义登录按钮、成功提示、跳转按钮的文字和图标
• 🔧 样式修复: 优化按钮样式，确保在uniapp和uniapp-x平台上一致显示
• 📱 兼容性: 增强跨平台兼容性，修复uniapp-x特有的样式问题

v1.0.2

• 插件支持直接安装到uni-modules

v1.0.1

• 调整目录结构适配uni-modules

v1.0.0

• 重大更新: 简化接口需求，现在只需要2个接口
• 移除: getUserProfile 后端接口，直接使用微信API
• 优化: 外部处理模式的事件参数结构
• 新增: 三种使用场景的详细说明
• 重命名: 组件名改为"一键微信登录"
• 新增外部处理模式，支持完全自定义API调用逻辑
• 新增externalHandling配置选项
• 新增externalLogin和externalUpdateUserInfo事件
• 移除wxLogin配置，始终使用uni.login()获取code
• 简化API配置结构
• 保留getUserProfile配置的灵活性