一、前言：为什么要学这四种页面创建方式？
很多刚接触 Geejing WebBuilder 的新手开发者都会有一个疑问：低代码平台直接拖拽组件即可，为什么官方要单独提供「静态HTML、动态DOM、模板渲染、动态组件」四种页面构建方案？
事实上，拖拽组件仅适用于常规可视化开发，而企业级真实业务场景复杂多样：固定静态页面、个性化动态页面、高效数据渲染、标准化组件复用，不同场景需要不同的开发模式。WebBuilder 官方的 Create Page 示例，是整个平台最核心的入门基石案例，囊括了平台所有页面渲染的底层能力。
吃透这四种开发模式，意味着你彻底掌握了 WebBuilder 页面渲染的全部逻辑，能够脱离纯拖拽局限，自主开发各类定制化、动态化、企业级业务页面，是从“只会拖拽”到“会开发、能定制、懂架构”的关键转折点。
二、WebBuilder 核心基础架构（新手必懂）
在正式学习四种页面创建方式前，必须先掌握平台统一的组件树架构，WebBuilder 所有页面都遵循固定层级结构，层级顺序绝对不能乱：
Module 模块 → Viewport 根视口 → Panel 内容面板 → 各类基础组件
1. 核心组件作用详解
Module（顶层模块） ：页面最外层容器，是整个页面的入口，负责定义页面整体属性、备注信息、标签分类、菜单显示状态。我们开发的所有页面内容，都必须包裹在 Module 内部。
Viewport（视口容器） ：页面唯一根渲染容器，占据全屏展示区域，所有可视化组件、面板、文本、表单都必须挂载在 Viewport 之下，是页面 DOM 渲染的根节点。
Panel（面板容器） ：业务内容核心载体，四种页面创建方式全部基于 Panel 实现。Panel 支持 HTML 静态渲染、JS 脚本事件、模板渲染、动态组件挂载，是 WebBuilder 自由度最高、使用最频繁的容器组件。
cid 唯一标识：平台核心定位规则，每一个组件、面板、模块都拥有独立 cid，全局唯一。脚本取值、赋值、查询、更新、刷新组件，全部依靠 cid 实现，是组件交互的核心唯一凭证。
2. 统一数据来源说明
官方示例中四种模式使用完全一致的后端模拟接口：demo-source?xaction=staffFirstRow，统一返回员工单行结构化数据，包含编码、姓名、生日、邮箱四个核心字段。统一数据源可以最大程度排除数据差异干扰，让开发者只关注「渲染方式的区别」，是官方非常经典的对比式教学案例。
三、四种页面创建方式超详细拆解
1. 静态 HTML 页面创建（零脚本、纯配置）
静态 HTML 是 WebBuilder 最简单、最基础的页面构建方式，全程无需编写任何 JavaScript 代码，仅通过配置 Panel 组件的 html 属性，写入标准 HTML 结构和平台内置 CSS 样式，即可完成页面渲染。
核心原理
页面初始化加载时，平台自动解析 Panel 的 html 属性字符串，一次性渲染为原生 DOM 结构，渲染完成后页面固化，无任何动态更新、无接口请求、无生命周期回调，属于一次性静态渲染。
官方示例源码解析
示例中通过 w-grid2 平台内置栅格样式，设置两列自适应布局，左侧为字段名称、右侧为具体数据，固定展示员工静态信息。所有内容硬编码在 HTML 中，页面加载后永久固定，不会随后台数据变化而变化。
优缺点详细总结
优点：加载速度极快、零脚本报错风险、资源占用极低、配置简单、无需调试、稳定性拉满。
缺点：完全静态固化、无法对接后端接口、无法动态更新数据、无法实现交互、复用性极差、仅适合固定内容展示。
精准适用场景
系统帮助文档、功能说明公告、固定参数展示、版权信息页、静态介绍页、无数据交互的展示类页面。
2. 动态 DOM 页面创建（脚本灵活操控）
动态 DOM 方式是 WebBuilder 最灵活的原生开发模式，核心依托组件的 ready 生命周期事件 实现动态渲染。页面组件挂载完成后，自动执行自定义脚本，实现接口请求、DOM 查询、文本修改、节点新增、页面刷新等所有个性化操作。
核心生命周期：Ready 事件
ready 是 WebBuilder 核心生命周期，组件 DOM 渲染完成、布局加载完毕、样式初始化结束后触发，且仅执行一次，非常适合用于页面初始化数据加载、动态内容渲染。
核心 API 逐行解析
let el = this.el：锁定当前面板的 DOM 根节点，限定操作作用域，避免全局 DOM 污染，精准操作当前组件内部元素。
el.query('[cid=xxx]')：根据 cid 精准查询子组件，是平台推荐的组件定位方式，比原生 DOM 查询更稳定、更适配低代码架构。
textContent：纯文本赋值方式，自动过滤 HTML 标签，杜绝 XSS 攻击，安全可靠，适合展示普通文本数据。
innerHTML：支持解析 HTML 标签，可实现富文本、颜色、样式、嵌套布局，自由度高，但存在安全风险，不建议渲染用户输入数据。
addEl()：平台封装的快速 DOM 创建方法，无需手动创建标签，可直接批量新增同级 DOM 节点，简化动态渲染代码。
Wb.ajax：平台全局通用异步请求方法，统一封装请求头、超时、回调、异常处理，是 WebBuilder 对接后端接口的标准写法。
优缺点详细总结
优点：自由度极高、可完全自定义渲染逻辑、支持异步动态加载数据、可精细控制每一个 DOM 节点、适配各类个性化特殊页面。
缺点：代码冗余度高、大量硬编码、复用性差、维护成本高、依赖开发者原生 JS 功底、复杂页面容易出现层级混乱。
精准适用场景
个性化排版数据卡片、特殊动态文案展示、需要精细控制渲染顺序的页面、少量动态数据展示的定制化页面。
3. 模板 TPL 渲染页面（高效解耦）
模板渲染是 WebBuilder 官方主推的轻量化高效开发方案，彻底解决了动态 DOM 代码冗余、维护困难的问题，实现「布局模板」和「业务数据」完全分离，是新手开发动态数据页面的最优入门方案。
核心运行流程
第一步：在 Panel 的 tpl 属性中编写页面布局模板，使用 {字段名} 作为数据占位符，搭建静态页面结构；
第二步：在 ready 事件中通过 Wb.ajax 请求后端接口，获取标准化 JSON 数据；
第三步：调用组件自带的 update(数据) 方法，平台内置模板引擎自动匹配字段、替换占位符、完成动态渲染。
核心优势：数据视图解耦
页面布局写在模板中，业务数据来自后端接口，后续修改页面样式、布局、文案无需改动接口逻辑；修改业务数据字段也无需调整页面结构，极大降低了迭代维护成本。
优缺点详细总结
优点：代码极简、逻辑清晰、开发效率极高、视图数据解耦、维护简单、上手门槛低、渲染速度稳定。
缺点：模板语法简单，不支持复杂逻辑判断、循环、条件渲染，仅适用于单行简单数据展示场景。
精准适用场景
员工信息详情、订单单行数据、用户资料卡片、基础数据展示类动态页面、新手快速开发业务页面。
4. 动态组件页面创建（企业级标准化）
动态组件开发是 WebBuilder 最贴合低代码核心理念的开发方式，彻底摒弃原生 DOM 操作、摒弃 HTML 硬编码，完全基于平台官方标准化组件工厂开发，是企业级正式项目的首选方案。
核心原理
通过 Panel 组件的 add() 方法，动态挂载平台官方原生组件，包括文本组件、展示组件、自定义组件等。所有组件均遵循平台统一 UI 规范、数据规范、校验规范，自动适配系统主题、布局、样式。
核心源码解析
示例中提前定义网格布局面板，接口请求成功后，根据后端返回数据，批量新增 displayField、text 等标准组件，动态设置组件标题、展示值，快速搭建标准化数据页面。同时平台预留 Wb.setValue 批量赋值方法，支持更高效的数据绑定。
优缺点详细总结
优点：组件标准化、可复用、可扩展、适配平台所有功能、支持数据绑定、表单校验、批量赋值、维护性极强、UI 统一美观。
缺点：简单页面开发步骤略多，极致简单场景不如模板方式高效，适合中长期项目迭代。
精准适用场景
企业业务表单、动态可编辑页面、可复用模块、复杂数据展示、正式上线的生产级项目页面。
四、新手终极快速选型表
-
纯静态、无数据交互、固定展示 → 静态 HTML
-
个性化定制页面、需要精细 DOM 控制 → 动态 DOM
-
常规动态数据展示、追求开发效率 → 模板渲染
-
正式项目、企业级业务、需要复用迭代 → 动态组件
