doc/frrweek4work2

@@ -1,43 +0,0 @@
-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 逻辑层处理，最后重绘界面反馈结果，实现 “原生容器 + 自定义交互” 的无缝衔接，既保留小程序的基础交互能力，又拓展了自定义交互的可能性。

doc/week4work3

@@ -1,21 +0,0 @@
-要分析 Django 模板的继承、包含关系及与模板标签（Tag）的依赖，并通过 UML 包图呈现，需从包结构和关系类型（泛化、依赖）两方面拆解：
-1. 核心概念与关系类型
-模板继承（泛化 Generalization）：子模板通过 {% extends %} 继承基础模板的整体结构（如页面骨架、公共区块）。
-模板包含（依赖 Dependency）：模板通过 {% include %} 嵌入可复用的组件模板（如导航栏、侧边栏），属于 “使用” 关系。
-模板与标签的依赖（依赖 Dependency）：模板使用 {% static %}、{% url %} 等模板标签时，依赖标签库提供的功能。
-2. UML 包图设计
-以 “博客园文章详情页” 的模板体系为例，设计包结构与关系：
-（1）包结构
-顶层包 Templates：管理所有模板相关资源；
-子包 BaseTemplates：存放基础模板（定义页面通用骨架，如 base.html）；
-子包 ComponentTemplates：存放组件模板（可复用的局部模块，如 header.html 导航栏、sidebar.html 侧边栏）；
-子包 ArticleTemplates：存放业务模板（文章详情等场景化模板，如 article_detail.html）；
-子包 TagLibrary：存放模板标签库（提供 static、url 等内置 / 自定义标签）。
-（2）关系映射
-1.	继承（泛化）：ArticleTemplates::article_detail.html 继承 BaseTemplates::base.html（子模板复用基础模板的整体结构）。
-2.	包含（依赖）：BaseTemplates::base.html 包含 ComponentTemplates::header.html（嵌入导航栏）和 ComponentTemplates::sidebar.html（嵌入侧边栏）。
-3.	模板与标签的依赖：BaseTemplates::base.html（引入静态 CSS/JS）和 ArticleTemplates::article_detail.html（生成页面链接）都依赖 TagLibrary（使用 static、url 等标签）。
-4. 关系解释
-泛化（继承）：箭头从子模板 article_detail.html 指向父模板 base.html，表示子模板复用父模板的结构（如 <head>、公共导航、布局框架）；
-依赖（包含）：虚线箭头从 base.html 指向 header.html/sidebar.html，表示 base.html 通过 {% include %} 嵌入这些组件模板；
-依赖（标签）：虚线箭头从模板（base.html/article_detail.html）指向 TagLibrary，表示模板通过 {% static %}/{% url %} 等标签依赖标签库的功能。