更新记录

1.0.2（2026-06-24）

• 修改错误的仓库链接地址

1.0.1（2026-06-24）

• 更新文档

1.0.0（2026-06-24）

首版发布

TuiPlus 5.0 蒸汽模式 UI 组件库首个正式版本。

核心架构

• 全新蒸汽模式架构，解决传统组件层层封装的性能瓶颈
• 集成 TuiVitex 编译器，编译时自动优化组件策略
• 集成 TuiEntine Canvas Flex 布局渲染引擎

组件

• 基础组件：t-page、t-button、t-icon、t-text、t-image、t-input 等
• 表单组件：t-form、t-checkbox、t-radio、t-switch、t-slider 等
• 反馈组件：t-popup、t-toast、t-dialog、t-loading、t-skeleton 等
• 展示组件：t-list、t-card、t-tabs、t-tag、t-badge、t-avatar 等
• 导航组件：t-header、t-navbar、t-tabbar、t-steps 等
• 高级组件：t-xcharts、t-canvas-engine、t-calendar 等

原生插件

• tui-camera：多平台相机拍照组件
• tui-scan：条形码/二维码扫码组件
• tui-ocr：OCR 文字识别
• tui-tts：文字转语音播报
• tui-pinyin：拼音/多音字/分词/繁简转换
• tui-sqlite：SQLite 本地数据库
• tui-http-server：轻量级 HTTP 服务器（Android/iOS/Harmony）
• tui-video-thumb：视频缩略图生成
• tui-permission：路由权限拦截器
• tui-schema：URL Schema 跳转服务
• tui-native：多平台原生 SDK 桥接层 等

图表增强

• t-xcharts 图表组件完善，补充完整使用示例
• 支持柱状图、折线图、饼图、环形图、雷达图等主流图表
• Canvas 高性能渲染，适配 App/小程序/Web

社区与生态

• 开源仓库：https://gitcode.com/tui-plus/tui-plus-vapor
• 官方文档：https://yundie.xyz/tuiplusvapor/index.html
• 模板市场：https://yundie.xyz/tuiplusvapor/template/
• UI 预览：https://yundie.xyz/tuiplusapp/index.html

实战验证

• 停车缴费系统：https://yundie.xyz/cartstop/index.html
• 扫码点餐系统：https://yundie.xyz/baozhi/index.html
• 塔子社交平台：https://yundie.xyz/dazhi/index.html

特性

• VaporCSS 原子化样式，编译时自动生成 class
• External-class 外部样式类支持
• 智能跨平台编译，App/小程序/Web 一套代码

平台兼容性

uni-app x(5.13)

其他

TuiPlus 5.0 组件库

项目介绍

TuiPlus 5.0 是一个基于 uniappX + Vite + UVue 开发的跨平台组件库，采用全新的「蒸汽模式」架构，引入了自研的 TuiVitex 编译器和 TuiEntine Canvas Flex布局渲染引擎，彻底解决了传统组件库的性能瓶颈。

TuiVitex 会在官方编译前将简单组件编译为官方组件，复杂组件会将模版字符串编译为 Canvas 的绘制代码！

TuiEntine 基于 Canvas 实现的 Flex 布局渲染引擎，支持声明式写法和模版字符编译为 Canvas 绘制代码进行界面绘制。

核心特性

1. 蒸汽模式架构

• 解决性能问题：TuiPlus 5.0 解决了 4.0 版本组件封装层层嵌套的性能瓶颈
• 编译增强：不再是简单的组件封装，而是对官方编译器的深度增强，简单的组件直接编译为官方组件，复杂组件全部采用全canvas绘制
• VaporCSS：对 Autostyle 进行重构，在编译时vite自动生成class代码
• External-class 支持：完美支持 external-class 的用法
• **xCharts 补充完整使用示例

2. TuiVitex 编译器

TuiVitex 是 TuiPlus 5.0 的核心编译器，它是一个基于 Vite 的自定义插件，在官方编译器之前对 Vue 模板进行预处理和转换。

工作原理

TuiVitex 通过 Vite 的插件机制，在编译阶段拦截和处理 .uvue 文件，根据组件的复杂度和使用场景，智能选择编译策略：

1. 环境变量：支持环境变量配置 import.meta.env.VITE_API_BASE_URL,
2. 简单组件：直接编译为官方组件，保证最佳性能
3. 复杂组件：编译为 Canvas 渲染代码，解决 DOM 性能问题
4. 平台适配：根据目标平台生成最优代码
5. 编译环境配置 自动扫描运行环境，全局样式，

   核心功能

功能1：智能组件编译

<!-- 源代码 -->
<t-page class="p-30">
  <text>内容</text>
</t-page>

<!-- App端编译为 -->
<scroll-view class="p-30">
  <text>内容</text>
</scroll-view>

<!-- 小程序/Web端编译为 -->
<view class="p-30">
  <text>内容</text>
</view>

功能2：小程序对text插槽的处理

<!-- 源代码（小程序text不支持使用slot） -->
<text>
  <slot></slot>
</text>

<!-- 小程序端自动处理转换为如下写法 -->
<view>
  <slot></slot>
</view>

功能3：模板字符串编译

<!-- 复杂组件的模板字符串 -->
<view class="container">
    <text>{{ title }}</text>
</view>

<!-- 编译为 Canvas 绘制代码 -->
const render = (ctx, data) => {
  ctx.fillStyle = '#fff'
  ctx.fillRect(0, 0, width, height)
  ctx.fillText(data.title, x, y)
}

更多智能编译参考官方文档对应组件编译的代码

编译流程

1. 模板解析：解析 Vue 模板，生成 AST
2. 组件识别：识别组件类型和复杂度
3. 策略选择：根据组件特征选择编译策略
4. 代码生成：生成unix识别的代码
5. 优化处理：提交到官方编译器进行编译

平台适配

TuiVitex 针对不同平台进行了深度优化：

• App 端：优先使用官方组件组件，减少对组件的层层封装
• 小程序端：处理平台限制，如 text 插槽问题
• Web 端：保持 Vue 语法兼容性
• 更多优化请参考官方文档

3. TuiEntine 渲染引擎

TuiEntine 是 TuiPlus 5.0 的核心渲染引擎，基于 Canvas 实现了完整的 Flex 布局系统，提供了高性能的 UI 渲染能力。

渲染原理

TuiEntine 通过以下步骤实现高效渲染：

1. 布局计算：使用 Flex 布局算法计算元素位置和尺寸
2. Canvas 绘制：将布局结果转换为 Canvas 绘制指令
3. 事件处理：实现完整的事件系统，支持交互
4. 缓存优化：智能缓存机制，减少重复渲染

核心功能

功能1：Flex 布局系统

TuiEntine 实现了完整的 Flex 布局算法，支持：

• 主轴方向：row、row-reverse、column、column-reverse
• 主轴对齐：flex-start、flex-end、center、space-between、space-around
• 交叉轴对齐：flex-start、flex-end、center、stretch、baseline
• 换行控制：nowrap、wrap、wrap-reverse

// 布局示例
const container = engine.createView()
container.style.flexDirection = 'row'
container.style.justifyContent = 'space-between'
container.style.alignItems = 'center'
container(child1)
container(child2)
container.draw()

功能2：事件系统

TuiEntine 实现了完整的事件系统：

• 事件类型：touchstart、touchmove、touchend、click 等
• 事件冒泡：支持事件冒泡机制
• 事件捕获：支持事件捕获阶段
• 事件委托：支持事件委托优化性能

// 事件处理示例
const button = engine.createButton()
button.onClick = () => {
  console.log('按钮被点击')
}

功能3：组件化架构

TuiEntine 采用组件化架构，提供丰富的内置组件：

• 基础组件：View、Text、Image、Button
• 布局组件：Scroll、Container
• 扩展组件：支持自定义组件

功能4：声明式写法

TuiEntine 支持声明式的组件写法：

// 组件使用示例
const view = engine.createView()
const text = engine.createText()
text.value = 'Hello TuiEntine'
view(text)
view.draw()

功能5：模板字符串编译

TuiEntine 支持将模板字符串编译为 Canvas 绘制代码：

const template = `
  <view class="card">
    <text class="title">{{ title }}</text>
    <text class="desc">{{ description }}</text>
  </view>
`

编译为如下运行代码

const view = engine.createView()
const text = engine.createText()
const text1 = engine.createText()
text.value = 'Hello TuiEntine'
text1.value='tuivitex'
view(text,text1)
view.draw()

性能优化

TuiEntine 通过多种技术实现高性能渲染：

• 增量渲染：只重绘变化的部分
• 虚拟滚动：支持大量数据的高效滚动
• 缓存机制：缓存渲染结果，减少重复计算
• 离屏渲染：使用离屏 Canvas 优化性能

技术架构

编译层

• TuiVitex：Vue 模板编译器，负责将模板编译为目标平台代码
• 编译优化：静态分析、代码生成、平台适配
• 插件系统：支持自定义编译插件

渲染层

• TuiEntine：Canvas Flex 布局渲染引擎，负责复杂组件的高性能渲染
• 布局系统：完整的 Flex 布局算法实现
• 事件系统：支持事件冒泡、捕获和处理
• 缓存机制：智能缓存，提升渲染性能

组件层

• 基础组件：编译为官方组件，保证基础功能的性能
• 复杂组件：使用 Canvas 渲染，解决性能问题
• 跨平台兼容：确保在不同平台的一致表现

高级特性

t-canvas-engine渲染组件

t-canvas-engine组件是TuiEntine的载体。TuiEntine会在t-canvas-engine进行绘制 t-canvas-engine标签内部的模版字符串TuiVitex会编译为TuiEntine的绘制代码

<template>
    <t-canvas-engine class="h-300px bg-#fff"
                 @initFinished="initFinished"
                 @touchstart="touchstart"
                 @touchmove="touchmove"
                 @touchend="touchend"
                 @touchcancel="touchend">
</t-canvas-engine>
</template>

<script setup>
function initFinished(engine : TuiEngine) {
        const classTree : UTSJSONObject = {
        main: {
            width: engine.width,
            height: engine.height,
            flexDirection: 'row'
        },
        left: {
            width: 100
        },
        right: {
            flex: 1,
        }
    }

    const view = engine.createView()
    view.class = 'main'

    const left = engine.createView()
    left.class = "left"
    const menuList = engine.createView()
    ...
    view(left)
    view.draw(classTree)
}
</script>

应用场景

• 复杂数据表格：使用 Canvas 渲染，支持大量数据的高效展示
• 高性能列表：解决长列表滚动卡顿问题
• 自定义交互组件：如颜色选择器、日历等
• 数据可视化：图表、仪表盘等
• 跨平台应用：需要在多端保持一致体验的应用

优势

1. 性能提升：Canvas 渲染解决 DOM 渲染瓶颈
2. 开发体验：保持 Vue 语法的简洁性
3. 跨平台兼容：一套代码，多端运行
4. 灵活定制：完善的样式系统和组件 API
5. 扩展性强：模块化架构，易于扩展
6. 智能编译：TuiVitex 自动优化编译策略
7. 高效渲染：TuiEntine 提供卓越的渲染性能

版本说明

• TuiPlus 5.0：蒸汽模式，全新架构
• TuiPlus 4.0：传统组件封装模式

注意事项

• 复杂组件使用 Canvas 渲染，可能在某些特殊场景下有局限性
• 请使用最新版本的 HBuilderX 和 Vue 3
• 部分高级特性可能需要特定平台支持

贡献

欢迎提交 Issue 和 Pull Request，共同改进 TuiPlus 组件库。

许可证

MIT License

TuiPlus 5.0 - 让组件开发更高效

官方文档

完整组件文档、API 参考和示例：https://yundie.xyz/tuiplusvapor/index.html

UI 预览

在线体验 TuiPlus 组件效果：https://yundie.xyz/tuiplusapp/index.html

项目实战

基于 TuiPlus 构建的完整项目案例，可在插件市场中下载源码：

以上项目均可在 TuiPlus 模板市场下载：https://yundie.xyz/tuiplusvapor/template/

插件一览

TuiPlus 生态包含以下 uni_modules 插件：

社区与生态

• gitcode仓库
• 组件官方文档
• 模板市场
• UI 预览

• 实战验证

• 停车缴费系统
• 扫码点餐系统
• 塔子社交平台

加入我们

欢迎加入GitCode TuiPlus Vapor，成为项目成员参与共建。

• 官方文档: https://yundie.xyz/tuiplusvapor/index.html
• 仓库地址: https://gitcode.com/abctau/tui-plus-vapor
• 邀请人: TuiPlus@abctau
• 邀请链接: https://gitcode.com/invite/link/edaaaf2d4ed6491fbd7a
• 过期时间: 2027-06-23

点击上方邀请链接即可申请成为 AtomGit | GitCode tui-plus-vapor 项目成员。