wx-wechat-login

一个基于 Vue 3 的通用微信扫码登录组件，支持二维码轮询登录状态、超时处理、刷新二维码等功能。可通过 npm 引入使用。

✨ 特性

• Vue 3 + <script setup> 编写
• 支持登录状态轮询与超时终止
• 支持插槽自定义 UI
• 提供灵活的事件钩子：登录成功、失败、超时、刷新
• 支持按需加载 / 全局注册

📦 安装

npm install wx-wechat-login
# 或者
pnpm add wx-wechat-login

🔨 使用方式

1. 注册组件

局部注册

<script setup>
// 导入组件
import { WechatLogin } from 'wx-wechat-login'
// 导入样式
import 'wx-wechat-login/dist/wx-login.css'
</script>

<template>
  <WechatLogin ... />
</template>

全局注册（main.js/main.ts）

import { createApp } from 'vue'
import App from './App.vue'
import WechatLoginPlugin from 'wx-wechat-login'

const app = createApp(App)
app.use(WechatLoginPlugin)
app.mount('#app')

⚙️ 组件参数（Props）

| 属性名 | 类型 | 必填 | 说明 | |----------------|----------|------|------| | imgUrl | String | ✅ | 微信二维码图片地址 | | scene | String | ✅ | 唯一标识码，用于后台状态查询 | | getStatus | Function | ✅ | 轮询接口，请求返回登录状态（如 api.getWxStatus） | | onSuccess | Function | ✅ | 登录成功的回调，参数为接口返回的数据 | | onRefresh | Function | ❌ | 点击二维码过期层后的刷新操作 | | onTimeout | Function | ❌ | 二维码过期超时后的回调 | | onError | Function | ❌ | 接口报错或请求失败时的回调 | | expireSeconds| Number | ❌ | 过期时间（默认 60 秒） |

🔁 插槽 Slots

| 插槽名 | 说明 | |----------------|------| | title | 自定义顶部标题区域 | | expired-text | 自定义二维码过期遮罩文案 | | footer | 自定义底部内容（如其他登录方式） |

🧪 示例

<template>
  <WechatLogin
    :img-url="imgUrl"
    :scene="scene"
    :get-status="api.getWxStatus"
    :on-success="handleSuccess"
    :on-refresh="refreshQr"
    :expire-seconds="60"
  />
</template>

const handleSuccess = (token) => {
  // 保存 token 并跳转
}

const refreshQr = async () => {
  const res = await api.getWxQrCode()
  imgUrl.value = res.data.qr_url
  scene.value = res.data.scene
}

🚀 发布到 npm

步骤

1. 修改 package.json 中 name、version、description 等字段
2. 创建 .npmrc 并配置你的 npm token（或登录）

npm login

3. 打包构建（如有）：

vite build # 或 rollup build

4. 发布：

npm publish --access public

📄 License

MIT