TechUI Docs

简中

EN

简中

EN

主题

Wasm核心概览 ​

TechUI Wasm Core 是驱动 TechUI 组件库的心脏，也是前端开发历史上首个商业级纯前端保护与渲染引擎。

我们摒弃了传统 UI 库仅依赖 JavaScript 的单一架构，将核心的几何计算、资产管理、授权校验及反篡改逻辑，迁移至 Rust 编写的 WebAssembly (Wasm) 模块中。这使得 TechUI 在拥有极致性能的同时，具备了原生应用级别的安全性与完整性。

为防止对Wasm模块的逆向，本章多个小节内容，均采用抽象模糊的概念性解释，并无实际的参数、状态等内容的讲解。

Wasm 异步加载 ​

Wasm模块的二进制文件的获取与实例化过程是 异步 进行的。

为了确保组件在渲染时能正确调用底层核心算法，开发者必须等待 Wasm 模块完全加载并初始化完毕后，才能挂载 Vue 应用。如果过早挂载，可能会导致组件无法显示或抛出核心未就绪的错误。

请在项目的入口文件（main.js）中参考以下方式调整启动逻辑：

js

TechUIInit(params).then(() => {
  app.use(router)
  app.use(store)
  app.mount('#app')
  console.log('TechUI Wasm Core loaded successfully.')
})

为什么引入 Wasm？ ​

在开发企业级大屏与高密度业务系统时，我们面临着性能与版权的双重挑战。Wasm Core 的引入完美解决了以下问题：

  1. 性能瓶颈：复杂的科幻 UI (Scifi UI) 包含大量的动态倒角、透视变换与 3D 姿态解算。JS 在处理此类高频数学运算时往往力不从心，而 Rust 编译的 Wasm 模块能以接近原生的速度执行这些计算。
  2. 版权保护：传统的 JS 代码即使混淆也易于被逆向。Wasm 的二进制特性天然构成了一个黑盒，配合内存隔离机制，有效保障了商业授权的不可篡改性。
  3. 资产安全：将 SVG 图案与核心算法编译进二进制文件，防止了美术资产被轻易提取或替换。

核心能力 ​

TechUI Core 并非一个简单的验证插件，它是一个多功能的微内核系统。

纯前端离线授权 (Serverless Licensing) ​

TechUI 实现了完全不依赖后端服务器的商业授权验证。

  • 零网络依赖：鉴权逻辑完全在本地 Wasm 沙箱中闭环运行，支持断网、内网、地下机房等物理隔离环境。
  • 零延迟：组件初始化无需等待鉴权接口响应，消除了首屏渲染的阻塞风险。

混合渲染引擎 (Hybrid Rendering) ​

为了在灵活性与包体积之间取得平衡，我们采用独特的双模渲染策略：

  • 动态几何 (Dynamic)：针对 ScifiPanel 等容器组件，由 Wasm 实时计算路径数据，确保任意尺寸下的边缘锐利度与完美的数学倒角。
  • 静态资产 (Static)：针对背景纹理与装饰元素，采用二进制压缩存储，运行时按需零拷贝读取。

主动防御体系 (Active Guard) ​

内置的 Guard 守卫 子系统负责运行时环境的完整性监测。

  • 防篡改：实时监测 DOM 结构、浏览器标题及原生 API 的完整性。
  • 熔断保护：一旦检测到恶意调试、时间回退或代码注入，系统将毫秒级触发熔断，移除组件并停止服务。

开放工具链 (Open Utilities) ​

虽然核心逻辑是封闭的，但我们将 Wasm 强大的计算能力通过 tuiCore 对象向开发者开放。

  • 加密套件：开放 md5Enc, openEnc 等高性能加密方法。
  • 诊断面板：提供详细的 tuiCoreInfo 诊断信息，帮助开发者快速排查环境问题。

浏览器兼容性 ​

由于依赖 WebAssembly 标准，TechUI Core 仅支持现代浏览器环境。

  • ✅ Supported: Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+
  • ❌ Unsupported: Internet Explorer (IE) 全系列

💡 架构图示

TechUI 的架构可以概括为：“JS 负责 DOM 操作与事件分发，Wasm 负责核心计算与安全控制”。这种分离设计确保了业务逻辑的灵活性与核心资产的安全性。

致谢 ​

软件工艺师
软件工艺师
BiliBili
jumtp
jumtp
BiliBili

特别感谢 UP 主 jumtp，其关于 Vite (Vue) 结合 Rust-Wasm 的教程为本项目打通了关键的工程化链路

同时感谢 软件工艺师 详尽的 Rust 权威指南 系列教程，为我们驾驭 Wasm 提供了坚实的语言理论基石。

感谢他们在 Bilibili 上的无私分享，让 Rust 前端化的学习曲线变得平缓。

🍵 题外话：关于 Rust 的学习门槛

大家或许会认为，既然能开发 WASM 模块，TechUI 的作者 Rust 造诣一定很深吧？

恰恰相反，坦白说，我对 Rust 的掌握仅止步于入门。作为一名典型的实用主义者，我的学习目标非常明确——掌握能开发 WASM 的基础即可，并未深入钻研语言的高级特性。在那个 AI 辅助编程尚未成熟的阶段，我确实花费了大量时间在试错与调试上。现在的AI来应对Wasm的开发应该是非常简单容易了。

分享这段经历，是希望帮大家打破对 Rust 的“畏难情绪”。不要觉得必须精通这门语言才能开始工作，带着目标去学，你完全可以轻松迈过这道门槛。

如果您对上述“黑科技”的底层实现原理、具体的 API 调用方式以及详细的架构设计感兴趣，请跳转至 Wasm 章节查看