Skip to content

Commit cc645a5

Browse files
committed
update solutions
1 parent 12f5fdd commit cc645a5

1 file changed

Lines changed: 13 additions & 14 deletions

File tree

solutions/rn-template-support.md

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
1. **处理 `<import>` 标签**
3636
* 识别 `tag === 'import'`
3737
* 提取 `src` 属性(支持 `.wxml` 文件),记录到 `meta.imports` 数组中。
38-
* AST 树中移除该节点 (不再参与后续渲染)。
38+
* 标记该节点在后处理阶段从 AST 树中移除 (不再参与后续渲染)。
3939

4040
2. **处理 `<template>` 标签**
4141
* **定义模式** (`name` 属性存在):
@@ -85,7 +85,7 @@
8585

8686
3. **注入 `templates` 对象**
8787
* 将引入的模版和本地模版合并:`const allTemplates = Object.assign({}, import_1, import_2, localTemplates);`
88-
* 在渲染函数内部生成 `getTemplate` 帮助函数,用于查找模版。
88+
* 在模块作用域按需生成 `getTemplate` 帮助函数,用于查找模版。
8989

9090
4. **内建组件信息处理**
9191
* `processTemplate.js` 不再递归预读 `meta.imports` 指向的模版文件。
@@ -160,20 +160,18 @@ Object.keys(localTemplates).forEach(function (name) {
160160
};
161161
});
162162

163-
// 合并模版
163+
// 合并模版(按需生成)
164164
var templates = Object.assign({}, import_item, localTemplates);
165+
function getTemplate(name) {
166+
return templates[name] || function(){};
167+
}
165168

166169
// 渲染函数
167170
global.currentInject.render = function(createElement, getComponent) {
168-
// 本地帮助函数,直接在作用域内访问 templates
169-
function getTemplate(name) {
170-
return templates[name] || function(){};
171-
}
172-
173171
return createElement(View, null,
174-
// 模版调用,直接调用本地函数
175-
getTemplate('msgItem').call(Object.assign(Object.create(this), this.item || {}), createElement, getComponent),
176-
getTemplate('item').call(Object.assign(Object.create(this), this.item || {}), createElement, getComponent)
172+
// 模版调用,包含运行时容错
173+
(typeof getTemplate === 'function' && getTemplate('msgItem') || function(){}).call(Object.assign(Object.create(this), this.item || {}), createElement, getComponent),
174+
(typeof getTemplate === 'function' && getTemplate('item') || function(){}).call(Object.assign(Object.create(this), this.item || {}), createElement, getComponent)
177175
);
178176
};
179177
```
@@ -192,21 +190,22 @@ global.currentInject.render = function(createElement, getComponent) {
192190
1. **`compiler.js` (AST 处理)**
193191
* 在 React 模式下处理 `<import>``<template>` 标签。
194192
* `<import src="...">` 生成带 `!!` 前缀的 `template-loader` request(例如 `!!path/to/template-loader!./item.wxml`)。
195-
* `<template name="...">` 提取到 `meta.templates``<template is="...">` 保留用于后续代码生成。
193+
* `<template name="...">` 提取到 `meta.templates``<template is="...">` 保留用于后续代码生成;需要移除的节点统一在后处理阶段清理
196194

197195
2. **`gen-node-react.js` (代码生成)**
198196
* `genTemplate` 复用 `genNode` 生成模版函数,多根节点场景使用 `block` (Fragment) 包裹。
199-
* `genNode` 识别 `<template is="...">` 并生成 `getTemplate(name).call(...)` 调用代码。
197+
* `genNode` 识别 `<template is="...">` 并生成带 `getTemplate` 容错的 `.call(...)` 调用代码。
200198
* 模版调用上下文使用 `Object.assign(Object.create(this), data || {})`,支持数据覆盖与原型链访问。
201199
* Element 节点优先处理 `genIf``genFor`,再处理 template 引用。
202200

203201
3. **`processTemplate.js` (模版聚合)**
204202
* 模版引入直接使用 AST 阶段生成的完整 request 字符串。
205-
* **模版聚合**:将引入的外部模版对象和本地定义的模版对象合并为统一的 `templates` 对象,并注入到运行时闭包中,供渲染函数使用。
203+
* **模版聚合**:将引入的外部模版对象和本地定义的模版对象合并为统一的 `templates` 对象,并按需生成模块级 `getTemplate` 供渲染函数使用。
206204
* 内建组件信息仅基于当前模版编译结果输出,不递归预读 imported template 文件。
207205

208206
4. **`template-loader.js` (模版 Loader)**
209207
* 位置:`packages/webpack-plugin/lib/react/template-loader.js`
210208
* 解析 RN 模式下的 `.wxml`,提取 `meta.templates``meta.builtInComponentsMap`,生成模版导出对象。
211209
* **运行时内建组件解析**:注入 `builtInComponentsMap``getBuiltInComponent``getTemplateComponent`,在模版执行时完成 imported template 的内建组件解析。
210+
* **按需 helper 注入**:仅在存在 imported/local template 源时生成 `templates/getTemplate` helper。
212211
* **模版函数包装**:对本地 template 函数进行包装,统一使用增强后的组件查找函数。

0 commit comments

Comments
 (0)