diff --git a/doc/frrweek4work2 b/doc/frrweek4work2 deleted file mode 100644 index a4f17ab..0000000 --- a/doc/frrweek4work2 +++ /dev/null @@ -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为例,包含标签,设置class="scrollarea"、scroll-y、type="list"等属性;标签,设置id="canvas"、type="webgl"、宽高为 390px 和 753px,样式为绝对定位、z-index:1,绑定bindtouchstart和bindtouchend事件;标签,设置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 逻辑层处理,最后重绘界面反馈结果,实现 “原生容器 + 自定义交互” 的无缝衔接,既保留小程序的基础交互能力,又拓展了自定义交互的可能性。 \ No newline at end of file diff --git a/doc/week4work3 b/doc/week4work3 deleted file mode 100644 index b02fe13..0000000 --- a/doc/week4work3 +++ /dev/null @@ -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,表示子模板复用父模板的结构(如 、公共导航、布局框架); -依赖(包含):虚线箭头从 base.html 指向 header.html/sidebar.html,表示 base.html 通过 {% include %} 嵌入这些组件模板; -依赖(标签):虚线箭头从模板(base.html/article_detail.html)指向 TagLibrary,表示模板通过 {% static %}/{% url %} 等标签依赖标签库的功能。 \ No newline at end of file diff --git a/src/test b/doc/新建 文本文档.txt similarity index 100% rename from src/test rename to doc/新建 文本文档.txt diff --git a/src/新建 文本文档.txt b/src/新建 文本文档.txt new file mode 100644 index 0000000..e69de29 diff --git a/开源软件泛读报告.docx b/开源软件泛读报告.docx new file mode 100644 index 0000000..85e2dd2 Binary files /dev/null and b/开源软件泛读报告.docx differ