多渠道移动端组件库 Titian 开发实践

1. 多渠道移动端组件库 Titian 开发实践牛壮 - 前端技术专家 2023 Weimob Technical Salon 丨 FE 回复“沙龙” 进群与讲师互动

2.

3. 讲师介绍牛壮微盟 · 前端技术团队技术专家，移动端组件库 Titian 和交易前端负责人。主要负责移动端组件库 Titian 的前端架构设计、开发、底层能力设计和对外开源，以及交易前端的公共业务框架设计和开发维护。主要专注于多渠道组件库与核心交易体系搭建，在该领域有丰富的经验。

4. 目录 01. Titian的价值点背景 & 解决问题 02. Titian 提供了什么能力 & 应用场景 03. Titian 的技术方案研发过程与技术方案 04. 后续规划 Figma转码 & UI Tokens

5. 01. Titian 的价值点背景 & 解决问题

6. 背景研发设计 - 代码重复冗余，导致小程序体积变大 - 各模块各自实现功能，面临多次重复验收 - 小程序/H5 各有一套代码实现，增加工作量 - 需要统一收口样式，减轻验收压力

7. 实现价值提高开发效率统一UI设计语言降低代码冗余沉淀技术品牌多端小程序/H5提供统一的 API 接入方式有效避免UI多次反复验收的情况提高验收效率重复冗余的代码统一收敛到组件库内部打造有影响力的技术资产可持续发展

8. 02. Titian 提供了什么组件 / 规范 / 多渠道

9. 大量组件 - - - 60+ 组件全局 / 布局 / 表单 / 展示 / 反馈 / 导航 / 业务自由搭配，千变万化

10. 设计规范 - 颜色 / 圆角 / 布局 / 字体 / 图标 / 投影 - 全局变量：颜色 / 圆角 / 图标

11. 多渠道&多框架多渠道小程序 - H5 & 小程序 API 一致 - 丰富的渠道支持 H5 多前端框架

12. 反馈组件小红书小程序 css 变量 github 开源 p np m 多端编译种草笔记 - uild 快手小程序微盟云 ISV 接入按需加载导购 - e sb 小程序多渠道 / React / Vue 支付宝小程序分销 - CMS 开发效率高 WOS 内 300+ 页面微信小程序 H5多框架百度小程序 - H5 QQ小程序互动营销 OneCR M 商城展示组件件组单表生态企微助手线下大屏 Titian UI 微盟 C 端组件库统一接口 web components 可交互示例 jest单测主题动态切换 d oc u sa u r us

13. 03. Titian 的技术方案小程序 / H5 / 周边工具 / 文档

14. 目录 1. 小程序框架分层解析 / 研发流程举例 / 示例 / 源码 / 单测 / 多渠道能力 02. H5 Web Components 技术 / Stencil 框架介绍 03. 周边工具 & 文档 TouchEmulator / 文档建设 / 开源建设

15. 3.1 小程序框架分层文档： Button / Tag / Popup / … 示例 & 单测： Button / Tag / Popup / … 组件： Button / Tag / Popup / … 公共层：全局 CSS 变量 / 公共 utils 函数编译打包：从 ts / less 生成 esm 包版本管理： SemVer 版本 / npm 发版脚本小程序文件结构包管理： pnpm 及辅助工具

16. 3.1 小程序 3.1.1 包管理 & 辅助工具 pnpm: 快速 / 高速 / 单体仓库 / 权限严格 - 同类工具速度的2倍 - 采用硬链接方式，节省 node_modules 体积 - 默认非扁平结构，防止“幽灵依赖” 辅助工具 - - - eslint stylelint cz-customizable

17. 3.1 小程序 3.1.2 多仓库介绍 - - - - - cli: 打包工具入口 snippets: vscode 提示插件 compiler: 自研打包编译工具 prettier-plugin-wxml: 自研 wxml 格式化插件 weapp: 小程序源码

18. 3.1 小程序 3.1.3 CLI titian-cli 工具： - 提供基础的 start, build, release 命令 - 提供 CommandHooks 钩子框架 - 基于 tapable 的 syncHook 能力 - - 编译阶段钩子： beforeInit / init / afterInit / beforeRun/ run / afterRun / watch / release UserConfig 配置 - 指定配置，如项目路径/hooks/编译器等

19. 3.1 小程序 3.1.4 Compiler 选择 esbuild 工具： - 基于 Go 语言写的打包器，比 webpack 快 100倍 - 支持 js / ts / css / jsx，可输出 esm 和 commonJS 使用 titian-cli 提供的生命周期 hooks 钩子 - buildTs - buildLess

20. 3.1 小程序 3.1.5 SemVer 版本管理语义化版本管理 - - 支持多个环境，如开发/测试/灰度/正式支持破坏性的更新。举例： 16.7.1-alpha.0 < 16.7.1-beta.0 < 16.7.1-rc.0 < 16.7.1 ▪ ▪ ▪ ▪ alpha - 不稳定测试版 beta - 预发布版 rc - 稳定测试版 latest - 线上正式版

21. 3.1 小程序 3.1.6 发版脚本 - - - - - - - 1.从当前分支切出 feature/ 发版分支 2.选择要发布的 packages 3.根据 SemVer 约定，通过 command 选择版本号 4.拉取 commit msg，生成 change log 5.提交，生成tag 6.推送远程分支，推送 npm 7.小程序自动发布预览码

22. 3.1 小程序 3.1.7 公共基础 CSS 变量内容：颜色 / 圆角 / 布局 / 字体 / 图标 / 投影组件内变量，继承自基础变量

23. 3.1 小程序 3.1.8 全局圆角方案需求 - 潮流型 = 椭圆角 - 通用型 = 直角 - 可爱型 = 圆角方案 - 对于业务方： - 设置 –base-radius-size 变量 - 设置 –capsule-radius-size 变量 - 对于组件： - 小圆角组件使用 @radius-4 - 胶囊圆角组件使用 @special-radius-4

24. 3.1 小程序 3.1.9 Icon 多风格方案需求： - 潮流型 - 通用型 - 可爱型方案： - 多个 font family 实现同一个 icon - 切换 font family 名即可优点： - 业务方无感接入 - 体积

25. 3.1 小程序 3.1.10 公共 BaseComponent - 所有组件继承于该 Class - 提供能力： - externalClasses 中，增加 ext-class - parent / children 转换为 ancestor / descendant - options 中，打开 multipleSlots / addGlobalClass 价值：提供公共的属性 -

26. 3.1 小程序 3.1.11 公共 Utils - 工具函数 - 提供能力： - 兼容 nextTick - 兼容 requestAnimationFrame - 数据类型判断方法 - 节流 / 防抖 - 日期辅助计算函数

27. 3.1 小程序 3.1.12 组件 API 设计原则属性 / 方法 / CSS 变量 / 事件 / 插槽文档在先，开发在后经历内部评审之后，再开始研发组件之间有共性，也有特殊性

28. 3.1 小程序 3.1.13 举例：Dialog 组件 - 常规设计： - 属性 / 方法 / 插槽 / CSS 变量 / 外部样式类 - 特殊点：两种调用方式 - DOM 式 = <ti-dialog /> - API 式 = $tiDialog.show - 继承封装：通过封装 Popup 组件，得到 Dialog 组件

29. 3.1 小程序 3.1.13 举例：Dialog 组件 - 如何实现 API 式调用 $tiDialog.show： - 方案：$tiDialog 下挂载静态方法 show; show 方法使用 selectComponent 查询 DOM 节点 - 如何适配分包异步加载： - 方案：返回 proxy，劫持get 方法；然后使用 selectComponent 轮询

30. 3.1 小程序 3.1.14 举例：SkuSelector 组件背景 1. 2. 已知数据如右，SKU + 规格 + 默认 SKU ID 交互有 3 种状态：选中 / 可选 / 不可选思考 1. 2. 3. 4. 5. 选中项 = onTap 或初始化即可得到可选项= ？不可选项= ？如果再加一种状态：售罄项 = ？入参 / 事件 / 插槽 / CSS 变量，如何设计？套餐套餐1 套餐2 套餐3 颜色红色紫色 - 内存 64G 128 G 256 G 表1. 规格集合 ID 1 紫色套装1 128 G ID 2 紫色套装1 64G ID 3 紫色套装2 128 G ID 4 红色套装2 256 G ID 5 表2. 可用 SKU 集合红色套装2 128 G

31. 3.1 小程序 3.1.14 举例：SkuSelector 组件 A.选中项：无向图红色：可以切换的顶点；同类；蓝色：可以连通的顶点；不同类；相邻：红色 + 蓝色 onTap 或默认值 B.可选项：所有“选中项”相邻顶点的集合 → 如何得到相邻顶点？ C.不可选项：所有“选中项”都不相邻的顶点 → 如何得到不相邻顶点？邻接表右：可连通表略：可切换表/不可连通表红色套装2 128G 256G - 紫色套装2 64G 128G - 套装1 64G 128G - - 套装2 红色紫色 128G 256 G 64G 紫色套装1 - - 128 G 红色紫色套装1 套装2 256

32. 3.1 小程序 3.1.14 举例：SkuSelector 组件三层数据，流转清晰 1. 2. 1. View Model 视图模型 - 属性及状态=可选/禁用/售罄 Data Model 数据模型 - Graph 邻接表=可选表 / 禁用表 / 售罄表 - Selected 选中项 = 动态变化 - Disabled 禁用项 = 随 Selected 变化 - Soldout 售罄项 = 随 Selected 变化 Props 属性 - SKU 列表 - 属性 SPECS 列表 - 默认 SKU ID

33. 3.1 小程序 3.1.15 可交互示例 PagePanel 面板式设计 - 视觉展示 - 根据 attrs 展示组件 - 属性面板 - 生成 attrs

34. 3.1 小程序 3.1.16 单测工具：miniprogram-simulate / jest 原理：将原本小程序自定义组件双线程分离运行的机制调整成单线程模拟运行，利用 dom 环境进行渲染，借此来完成整个自定义组件树的搭建。 getComponent 方法： - 传入组件名/参数 - 加载自定义组件，使用 id 渲染组件，返回实例 - 对组件做了一个 Cache 缓存能力举例： - 获取数据 / 更新数据 - 触发事件 - 触发生命周期 - 获取 this

35. 3.1 小程序 3.1.17 接入多渠道 - 中台 titan-cli 转码工具的第一个用户 - 支付宝渠道，反馈 150 + bug，包括诸多关键能力： - relations 能力 - CSS 的 :host 能力 - externalClass 支持能力 - observer 监听器问题 - 小红书渠道，反馈 70+ bug - wxs 支持能力 - observers 监听器问题

36. 3.2 H5 3.2.1 使用 Stencil 框架 - Stencil 是一个编译器，可以生成 Web Components 代码 - 能力： - 使用 TypeScript, JSX, CSS - 使用 Virtual DOM - 类似于 React 的生命周期 - 支持生成 Vue 和 React

37. 3.2 H5 3.2.2 深入 Web Components 三大组成部分： - 1.Shadow DOM - 2.Template - 3.Custom Elements

38. 3.2 H5 3.2.2 深入 Web Components Shadow DOM & 自定义事件 - retarget: - 内部正常冒泡 - 外部以 web components 组件为起点 - slot 元素正常冒泡 - 自定义事件： - bubbles 是否冒泡 - composed 是否穿越边界 - event.composedPath() 原始事件完整路径

39. 3.2 H5 3.2.2 深入 Web Components Shadow DOM & CSS - 常规情况，样式是内外隔离的 - :part - 外部指定内部元素的样式 - :host - 指定外部宿主样式 - CSS 变量穿透插槽 Slot - 具名插槽 / 不具名插槽 - slotChange 事件

40. 3.2 H5 3.2.3 Stencil 如何支持 React Stencil 源码中，支持 React 共计 114 行代码 diaplayName - dash 转为 pascal 格式生命周期 - 原样调用 componentDidMount - 原样调用 componentDidUpdate 属性 - 通过 forwardedRef 原样传入事件 - 把 onAbc 事件名改为 abc

41. 3.3 文档 3.3.1 Docusaraus 工具 - 支持 markdown / react 页面 - API 文档采用 markdown - 首页采用 react 页面 - 100+ 模块，可插拔/重写/覆盖

42. 3.4 周边建设 3.4.1 touch-emulator 背景 - PC 上如何支持 Titian 组件库的触摸事件？调研 - hammerjs/touch-emulator - 局限：Web Components 内部的 touch 事件无法冒泡，因此滑动不了方案： - fork 并增加 Web Components 支持能力 - 从 composedPath() 取 target 元素，依次冒泡

43. 3.4 周边建设 3.4.2 开源准备 - 代码安全审查 - 删除各种 key - 删除内网域名 - 检查注释内容 - 内网/外网 npm 隔离 - 官网建设 - 首页建设 - 主题样式调整 - 文案宣发

44. 04. 后续规划更丰富的能力

45. 接入 Figma 转码 Design to Code, D2C 减少前台重复工作量，提升需求流转效率

46. 接入 UI Tokens Tokens 即基础的设计变量；如：颜色 / 主题 / 字体 / 边距 UED 通过配置，即可定制视觉主题；跳过繁琐的手写代码阶段；解放生产力。

47. 联动 CanCode 低代码平台使用 Titian 组件库，拖拽快速成型与 Figma 联动互通，从 UI 到 CanCode

48. THANK YOU 谢谢你的观看牛壮 - 前端技术专家 2023 Weimob Technical Salon 丨 FE 回复“沙龙” 进群与讲师互动