更新记录

1.0.0（2026-07-14）

初次版本

平台兼容性

uni-app(3.96)

zmt-one-login 清新绿色手机登录插件

插件简介

uniapp 标准 uni_modules 登录页面组件，1:1还原浅绿色清新登录UI，集成手机号验证码登录、微信登录、QQ第三方登录功能，全端适配、开箱即用，符合 uniapp 插件开发规范。

核心优势

• 全局自动注册：页面直接使用标签，无需 import、无需手动注册组件，零配置引入

• 规范纯净组件：组件内部不使用 onLoad 页面生命周期，纯组件逻辑，完全符合 uni_modules 插件规范

• 高还原UI细节：完整还原参考图配色、圆角、间距、渐变背景、叶片装饰等视觉细节

• 完善表单校验：内置手机号、验证码完整表单校验规则，自动限制输入长度，交互友好

• 全端兼容适配：支持微信小程序、H5、App 多端运行，采用 rpx 单位，自适应移动端所有屏幕尺寸

• 样式隔离无污染：所有样式独立隔离，统一 zmt- 前缀，不会污染项目全局样式

目录结构

插件完整目录结构如下，严格遵循 uniapp uni_modules 规范：

uni_modules/zmt-one-login/
├── components/zmt-one-login/  # 组件源码目录
│   ├── zmt-one-login.vue       # 登录主组件
│   └── static/                 # 微信、QQ图标静态资源
├── index.js                    # 全局组件自动注册入口
├── package.json                # 插件市场检索配置
└── readme.md                   # 插件使用文档

快速使用教程

1. 将整个 zmt-one-login 文件夹放入项目根目录 uni_modules 文件夹，无需任何额外配置

2. 项目内所有页面、组件可直接使用组件标签，无需手动导入、无需注册组件

基础使用示例

<template>
  <zmt-one-login 
    :login-success="handlePhoneLogin"
    :third-login-callback="handleThirdLogin"
  />
</template>

<script>
export default {
  methods: {
    // 手机号验证码登录回调
    handlePhoneLogin(form) {
      console.log('登录表单数据：', form)
      // 可在此处编写后端登录接口请求逻辑
    },
    // 第三方登录回调
    handleThirdLogin(type) {
      if (type === 'wechat') {
        console.log('唤起微信登录')
      } else if (type === 'qq') {
        console.log('唤起QQ登录')
      }
    }
  }
}
&lt;/script&gt;

组件参数说明

内置校验规则

• 手机号校验：非空校验 + 11位标准手机号正则校验，杜绝非法手机号输入

• 验证码校验：非空校验，输入框限制最大6位数字输入，自动拦截非法字符

• 错误提示：采用原生 uni.showToast 轻提示报错，不阻塞页面操作，交互流畅

UI 细节特性

• 背景样式：浅黄绿渐变全屏背景 + 淡绿色叶片装饰图案，清新简约

• 标题布局：顶部深绿色超大登录标题 + 辅助副标题，层级清晰

• 表单区域：白色圆角卡片表单区域，搭配柔和绿色阴影，质感高级

• 输入框样式：椭圆圆角输入框，内置绿色图标，整体视觉风格统一

• 登录按钮：通栏绿色渐变登录按钮，适配移动端点击热区

• 第三方登录：居中分割线 + 微信、QQ第三方登录入口，布局规整

图标兼容方案

若缺失 static 本地图标文件，可直接替换为 uni-icons 官方图标，无需依赖本地图片资源，兼容所有端：

<!-- 微信图标 -->
<uni-icons type="wechat" size="68" color="#07c160" />

<!-- QQ图标 -->
<uni-icons type="qq" size="68" color="#12b7f5" />

注意事项

• 项目需开启 scss 编译（uniapp 新项目默认自带支持，无需额外配置）

• 组件无 onLoad / onShow 页面生命周期，纯组件回调通信，无页面逻辑污染

• 静态资源目录请勿随意移动、重命名，避免图标路径失效导致图标不显示

（注：部分内容可能由 AI 生成）