|
|
PixUI 编译为 WebAssembly 适配微信小程序的界面与流转分析
|
|
|
一、界面结构分层（从技术依赖到最终渲染）
|
|
|
将界面从 “底层技术” 到 “用户可见界面” 拆分为 4 个层级，各层级核心内容与作用如下：
|
|
|
1. 技术依赖层
|
|
|
核心内容：PixUI（C# 编写）、Skia（C++ 图形引擎）
|
|
|
核心作用：二者共同编译为 WebAssembly，作为界面渲染的 “逻辑与引擎基础”，为后续界面绘制提供底层技术支撑，决定了界面渲染的逻辑规则与图形处理能力。
|
|
|
2. 资源文件层
|
|
|
核心内容：包含_framework目录，内部有dotnet.js（41KB，微信小程序文件类型，3 月 14 日修改）、dotnet.native.js（152KB，微信小程序文件类型，当日 10:51 修改）、dotnet.runtime.js（195KB，微信小程序文件类型，3 月 14 日修改）、blazor.boot.json（17KB，JSON 文档，当日 10:51 修改）、dotnet.js.map（57KB，文档，3 月 14 日修改）、dotnet.native.wasm（2.9MB，文档，当日 10:51 修改），还有pkgs（当日 10:52 创建的文件夹）、supportFiles（当日 10:51 创建的文件夹）等。
|
|
|
核心作用：存储 WebAssembly 运行所需的核心文件，是小程序加载 WASM 的 “资源载体”，这些文件共同保障 WebAssembly 能在微信小程序环境中正常启动与运行。
|
|
|
3. 小程序代码层
|
|
|
核心内容：微信小程序的 WXML（以index.wxml为例，包含<scroll-view>标签，设置class="scrollarea"、scroll-y、type="list"等属性；<canvas>标签，设置id="canvas"、type="webgl"、宽高为 390px 和 753px，样式为绝对定位、z-index:1，绑定bindtouchstart和bindtouchend事件；<input>标签，设置id="input"、类型为 text，样式为绝对定位、z-index:3、无边框、宽高为 0 等）、TS（index.ts）等代码。
|
|
|
核心作用：充当 “桥梁层”，通过 Canvas 承载 WASM 渲染结果，同时绑定交互事件，实现用户操作与 WASM 逻辑的连接，是小程序与 WebAssembly 交互的关键环节。
|
|
|
4. 用户可见层
|
|
|
核心内容：最终呈现给用户的界面，包含图表（柱状图与折线图组合，带有 “Series #1 11”“Series #2 17” 等数据提示）、“Hello World!” 按钮等元素，界面在微信开发者工具模拟器（iPhone 12/13 (Pro) 型号，85% 比例，16 亮度）中展示。
|
|
|
核心作用：是用户直接交互的 “视觉结果”，用户通过该层进行操作，如触摸图表查看数据详情、点击按钮触发相关功能，直观感受小程序的功能与体验。
|
|
|
二、界面流转逻辑（从代码到渲染的全链路）
|
|
|
以 “用户操作触发→代码响应→界面更新” 为线索，界面流转路径如下：
|
|
|
1. 启动与加载阶段
|
|
|
触发条件：微信小程序启动
|
|
|
流转 1：加载_framework目录下的 WASM 资源，即上述资源文件层中的dotnet.native.wasm等核心文件，这些文件是 WebAssembly 运行的基础素材，加载过程为后续渲染做资源准备。
|
|
|
流转 2：小程序代码（index.wxml/index.ts）初始化 Canvas 组件，根据index.wxml中对 Canvas 的属性设置，为其分配相应的尺寸、定位等，准备好界面渲染的载体，使 Canvas 具备承载 WASM 渲染结果的能力。
|
|
|
流转 3：WebAssembly 中的 PixUI（C#）与 Skia（C++）开始执行，按照自身的逻辑规则，在已初始化好的 Canvas 上绘制界面，最终呈现出微信开发者工具模拟器中看到的图表、“Hello World!” 按钮等元素。
|
|
|
2. 交互阶段（以 “触摸图表” 为例）
|
|
|
触发条件：用户触摸模拟器中 Canvas 上的图表区域
|
|
|
流转 1：小程序index.wxml中 Canvas 绑定的bindtouchstart/bindtouchend事件被触发，这是用户操作转化为代码响应的起始点，事件绑定机制确保用户触摸行为能被小程序捕捉。
|
|
|
流转 2：触发的事件通过小程序代码（index.ts）传递到 WebAssembly 中的 PixUI（C#）逻辑层，index.ts在此过程中起到数据传递与逻辑衔接的作用，搭建起小程序与 WebAssembly 之间的通信桥梁。
|
|
|
流转 3：C# 逻辑层接收事件后，处理触摸逻辑，比如判断触摸位置确定用户关注的图表数据点，然后生成 “Series #1 11”“Series #2 17” 等数据提示，并通知 Skia 重绘 Canvas，Skia 作为图形引擎，负责将处理后的界面效果重新绘制出来。
|
|
|
流转 4：Canvas 重绘完成后，模拟器中的界面随之更新，图表提示动态变化，完成 “交互→反馈” 的完整流转，使用户能实时看到操作后的界面变化。
|
|
|
三、核心界面元素与交互（用户可见层分析）
|
|
|
1. 图表区域
|
|
|
载体：Canvas 组件（对应小程序代码层index.wxml中的canvas标签）
|
|
|
内容：由柱状图和折线图组合而成，并且带有 “Series #1 11”“Series #2 17” 等数据提示，图表能直观展示数据关系，数据提示则为用户提供具体数据信息。
|
|
|
交互：支持用户触摸操作，当用户触摸图表时，触发相关事件，事件传递到 WebAssembly 中 C# 逻辑层进行处理，之后 Skia 重绘界面展示数据详情，使用户能精准获取触摸位置对应的图表数据。
|
|
|
2. “Hello World!” 按钮
|
|
|
载体：Canvas 上绘制的自定义按钮，并非微信原生按钮，由 PixUI 负责渲染生成，属于自定义界面元素。
|
|
|
交互：理论上可绑定点击事件，不过该事件需在 WebAssembly 中通过 PixUI 逻辑实现，点击后可能触发数据更新（如生成新的图表数据）、新界面绘制（如展示新的界面元素）等操作，为用户提供功能触发入口。
|
|
|
3. 小程序容器元素
|
|
|
结构：由scroll-view标签包裹 Canvas（对应index.wxml中的scroll-view标签设置），scroll-view具备滚动功能。
|
|
|
作用：提供页面滚动能力，当界面内容超出当前显示区域时，用户可通过滚动查看完整内容，确保长内容（若后续界面拓展增加更多元素）的良好浏览体验。
|
|
|
四、设计特点总结
|
|
|
“跨技术栈融合”：借助 WebAssembly 技术，成功桥接 C#/C++ 与微信小程序两个不同技术栈，实现 “用熟悉的 C#/C++ 语言开发，在微信小程序生态中运行” 的目标，打破技术栈之间的壁垒，让开发者能充分利用已有技术优势进行小程序开发。
|
|
|
“Canvas 为核心载体”：摒弃以微信原生组件为主的传统界面构建思路，将 Canvas 作为核心载体，界面中的图表、按钮等元素均由 WASM 渲染生成，这种方式保证了界面的 “自定义性”（可根据需求灵活设计界面样式与交互）与 “跨端一致性”（在不同设备上呈现的界面效果更统一）。
|
|
|
“事件桥接交互”：利用小程序原生事件（如bindtouchstart）与 WebAssembly 逻辑进行联动，用户操作先触发小程序原生事件，再通过代码传递到 WebAssembly 逻辑层处理，最后重绘界面反馈结果，实现 “原生容器 + 自定义交互” 的无缝衔接，既保留小程序的基础交互能力，又拓展了自定义交互的可能性。 |
