wall-ui

基于 uniapp 的 多端（小程序 / H5 / App）兼容 UI 组件库。

使用 Vue3 <script setup> + TypeScript 编写，组件以源码（.vue）形式发布，由 uniapp 编译器按目标平台编译，因此多端表现一致、产物体积小。

✨ 特性

• 🎯 多端兼容：微信 / 支付宝 / 字节等小程序、H5、App
• 💪 TypeScript：完整的类型推导，组件 Props / Events / 类型均可按需导入
• 🧩 easycom 自动引入：配置后直接写 <w-button>，无需手动 import
• 🍭 按需 / 全量：支持 app.use(WallUI) 全量注册，也支持单组件引入
• 🎨 主题变量：基于 SCSS 变量，消费方可在 uni.scss 中覆盖

📦 安装

# npm
npm i wall-ui

# yarn
yarn add wall-ui

# pnpm
pnpm add wall-ui

组件库以 vue、@dcloudio/uni-app 为 peerDependencies，请确保宿主项目已安装（uniapp 项目默认已具备）。

有问题-找作者反馈

可前往CSDN作者主页：https://blog.csdn.net/QingQingYang6?type=blog

🚀 使用

方式一：easycom 自动引入（推荐）

在 uniapp 项目的 src/pages.json 中配置 easycom，之后任何页面直接使用 <w-button> 即可，无需 import：

{
    "easycom": {
        "autoscan": true,
        "custom": {
            "^w-(.*)": "wall-ui/src/components/w-$1/index.vue"
        }
    },
    "pages": [
        {
            "path": "pages/home/index",
            "style": { "navigationBarTitleText": "首页" }
        }
    ]
}

页面中使用：

<template>
    <w-button type="primary" @click="onClick">主要按钮</w-button>
</template>

<script setup lang="ts">
const onClick = (e: any) => {
    console.log("click", e);
};
</script>

方式二：全量注册（app.use）

在 src/main.ts 中：

import { createSSRApp } from "vue";
import App from "./App.vue";
import WallUI from "wall-ui";

export function createApp() {
    const app = createSSRApp(App);
    app.use(WallUI); // 全局注册所有组件
    return { app };
}

方式三：按需引入

<script setup lang="ts">
import { WButton } from "wall-ui";
</script>

<template>
    <w-button type="success">成功</w-button>
</template>

🎨 主题定制

在宿主项目的 src/uni.scss 中覆盖变量即可（去掉 !default）：

// 覆盖主色
$w-color-primary: #ff6b6b;

// 引入 wall-ui 的变量文件，使其生效
@import "wall-ui/src/styles/variables.scss";

完整变量见 src/styles/variables.scss。

📖 w-button API

Props

| 参数 | 说明 | 类型 | 默认值 | | ------------ | ------------------------------------- | ---------------------------------------------------------------- | --------- | | type | 类型 | default / primary / success / warning / error / info | default | | size | 尺寸 | large / normal / small / mini | normal | | shape | 形状 | default / round / circle | default | | plain | 朴素按钮 | boolean | false | | disabled | 禁用 | boolean | false | | loading | 加载中 | boolean | false | | loading-size | 加载图标尺寸 | number / string | 30 | | block | 撑满父容器宽度 | boolean | false | | color | 自定义颜色（优先级高于 type） | string | - | | open-type | 小程序开放能力（分享 / 获取手机号等） | share / getPhoneNumber / ... | - | | custom-class | 自定义类名 | string | - | | custom-style | 自定义样式 | string / object | - |

Events

| 事件名 | 说明 | 回调参数 | | -------------- | ----------------------------- | -------- | | click | 点击按钮（禁用/加载中不触发） | event | | getphonenumber | open-type=getPhoneNumber | event | | getuserinfo | open-type=getUserInfo | event | | error | 开放能力调用失败 | event |

Slots

| 插槽名 | 说明 | | ------- | ---------- | | default | 按钮文字 | | icon | 自定义图标 |

🧑‍💻 开发：新增一个组件

组件采用「一组件一目录」约定，复制 w-button 结构即可：

src/components/w-button/
├── index.vue     # 组件本体（<script setup lang="ts">）
├── props.ts      # Props 类型 + 运行时定义
└── index.ts      # 导出组件 + 类型

1. 新建 src/components/w-xxx/，按上面三件套编写；
2. 在 src/index.ts 的 components 数组与 export 中登记；
3. easycom 规则 ^w-(.*) 会自动匹配新组件，无需改 pages.json。

License

MIT