Weave UI for uniapp

@weaveui/uniapp 是面向 uni-app / Vue 3 项目的移动端业务组件库，提供常用页面组件、主题样式和全局配置能力。

目录结构

uniapp-ui/
├── src/                          # 组件库源码
│   ├── components/               # 移动端组件
│   │   ├── action-sheet/
│   │   ├── card/
│   │   ├── condition-filter/
│   │   ├── date-picker-range/
│   │   ├── drawer/
│   │   ├── empty/
│   │   ├── file-list/
│   │   ├── input/
│   │   ├── mescroll/
│   │   ├── nav-bar/
│   │   ├── picker-view/
│   │   ├── qrcode/
│   │   ├── steps/
│   │   ├── tabs/
│   │   ├── tips/
│   │   ├── ui-theme/
│   │   └── upload/
│   ├── config.js                 # 组件库全局配置
│   ├── meta.d.ts                 # 品牌名、插件名和包名类型声明
│   ├── meta.js                   # 品牌名、插件名和包名集中配置
│   └── index.js                  # 组件导出和 install 注册入口
├── docs/                         # 移动端组件文档站
│   ├── components/               # 组件说明文档
├── examples/                     # 示例工程
│   └── mini/                     # 移动端组件 Demo
│       ├── src/pages/            # Demo 页面
│       ├── src/uni_modules/      # uni-ui、lime 等第三方 uni_modules
│       ├── src/static/           # 静态资源
│       ├── src/pages.json        # 页面路由和导航配置
│       ├── src/manifest.json     # uni-app 应用和平台配置
│       └── package.json          # Demo 依赖和脚本
├── scripts/                      # 发布前检查脚本
├── npm-package-release.md        # @weaveui/uniapp npm 发布流程
├── package.json                  # @weaveui/uniapp 包配置
├── package-lock.json             # npm 锁文件
└── README.md                     # 当前说明文档

安装

请在已有 uni-app / Vue 3 项目中使用本包，并沿用宿主项目自身的 vue、@dcloudio/uni-app、@dcloudio/uni-ui 版本配置，避免额外安装导致版本冲突。

npm install @weaveui/[email protected]

如果项目使用 pnpm 或 yarn，也可以使用对应命令：

pnpm add @weaveui/[email protected]

yarn add @weaveui/[email protected]

引入样式

在应用入口样式或全局样式文件中引入组件库主题样式：

@import '@weaveui/uniapp/theme.css';

按需使用

<template>
  <NavBar :nav="nav" />
  <Qrcode text="https://example.com" />
</template>

<script setup>
import NavBar from '@weaveui/uniapp/components/nav-bar/nav-bar.vue'
import Qrcode from '@weaveui/uniapp/components/qrcode/index.vue'

const nav = {
  title: '页面标题',
  back: true,
  backgroundColor: '#006FDB',
  titleColor: '#fff'
}
</script>

全量注册

import { createSSRApp } from 'vue'
import WeaveUniapp from '@weaveui/uniapp'
import '@weaveui/uniapp/theme.css'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)

  app.use(WeaveUniapp, {
    theme: '--theme-color:#e94e41;--theme-color-01:rgba(233,78,65,0.1);',
    baseImgUrl: 'https://static.eeeyou.cn/shop/applet/images/red',
    navMetrics: {
      statusBar: 0,
      customBar: 45
    }
  })

  return { app }
}

全局配置

组件库全局配置可通过 app.use(WeaveUniapp, options) 或 setWeaveUniappConfig(options) 设置。

| 配置项 | 默认值 | 说明 | | --- | --- | --- | | theme | '' | 主题样式字符串，优先级高于本地存储中的 theme | | navMetrics.statusBar | 0 | 导航栏状态栏高度 | | navMetrics.customBar | 45 | 自定义导航栏高度 | | navMetrics.systemInfo | null | 业务侧传入的系统信息，未传时组件可在运行时通过 uni.getSystemInfo 获取 |

主题样式文件导出路径为 @weaveui/uniapp/theme.css。组件库不应写入业务接口、登录态、AppID、证书或生产敏感配置；需要宿主项目通过 props、配置或环境变量注入。

各组件可通过 @weaveui/uniapp/components/<component-path> 按需引入。组件目录内包含对应的 README.md，可查看组件用法、参数和示例。

发布检查

发布前建议执行：

npm run check
npm pack --dry-run

确认发布包中不包含业务耦合引用、临时文件或构建缓存。