基于预渲染技术实现Web页面瞬开效果

介绍

本示例基于预渲染技术，实现了点击后Web页面瞬间打开的效果，无需额外加载过程，减少用户等待时长，提高了用户体验。

效果预览

web

使用说明：

1. 点击标签打开弹窗，加载Web网页。

工程目录

├──entry/src/main/ets/
│  ├──common
│  │  └──Constants.ets                  // 公共常量类
│  ├──entryability
│  │  └──EntryAbility.ets               // 程序入口类
│  └──pages              
│     ├──Index.ets                      // 首页
│     └──WebPage.ets                    // Web预渲染页面
└──entry/src/main/resources             // 应用静态资源目录

具体实现

本示例利用 ArkUI 的节点控制器（NodeController）与构建节点（BuilderNode）能力，在首页 Index 页面加载完成后、用户点击之前，提前在后台完成 Web 组件的创建与网页加载（预渲染），从而实现点击弹窗后 Web 页面"瞬开"的效果。

1. 在 WebPage.ets 中定义 WebBuilder 构建函数，内部创建 Web 组件并关联 WebviewController，用于承载待预渲染的网页。
2. 通过 wrapBuilder 包装 WebBuilder 构建函数，使其可以被 BuilderNode 的 build 方法调用。
3. 自定义 MyNodeController 继承自 NodeController，重写 makeNode 方法返回 BuilderNode 对应的 FrameNode，作为节点的渲染载体。
4. 在 EntryAbility.onWindowStageCreate 中，loadContent 加载首页完成后，调用 createNWeb(Constants.WEB_URL, windowStage.getMainWindowSync().getUIContext())：
   • 创建 BuilderNode 实例，并调用其 build 方法将 WebBuilder 构建为真实组件节点，提前完成网页的加载与渲染（预渲染）。
   • 以 URL 为 key，将对应的 MyNodeController 和 WebviewController 分别存入全局的 NodeMap、controllerMap 中。
5. 首页 Index.ets 中，通过 bindSheet 绑定弹窗，弹窗内容使用 NodeContainer(getNWeb(Constants.WEB_URL))：
   • getNWeb 从 NodeMap 中取出预渲染好的 MyNodeController 并挂载到 NodeContainer 上，将已渲染完成的 Web 页面直接展示出来，无需等待加载过程。
6. 点击首页文字区域，切换 isShowSheet 状态打开弹窗，即可瞬时看到已预渲染完成的 Web 页面。

关键 API 说明

• NodeController（节点控制器）：ArkUI 提供的原生视图控制器，用于以命令式方式创建并管理自定义组件节点。继承该类并重写 makeNode(uiContext: UIContext): FrameNode | null 方法，返回需要挂载的节点；本示例中返回 BuilderNode 的 FrameNode，从而让预渲染的 Web 页面能够被动态挂载到任意组件树位置。
• BuilderNode（构建节点）：用于承载由 @Builder 构建函数创建出来的组件节点。通过 new BuilderNode(uiContext) 创建实例，再调用 build(wrapperBuilder, params) 传入 wrapBuilder 包装后的构建函数及参数，即可在非 UI 代码中（如 Ability 中）预先完成组件构建，这是实现预渲染的关键能力。
• NodeContainer（节点容器）：用于在组件树中挂载 NodeController 返回的节点。将 NodeContainer(controller) 放入页面任意位置，即可显示控制器对应的预渲染内容，实现"先渲染、后展示"。
• wrapBuilder（构建函数包装器）：将 @Builder 构建函数包装后，供 BuilderNode.build 使用，实现构建函数的跨上下文传递与调用。
• WebviewController（Web 视图控制器）：管理 Web 组件的控制器，用于后续对网页进行前进、后退、刷新等控制。本示例在预渲染阶段即创建并关联到 Web 组件。

相关权限

1. 网络使用权限：ohos.permission.INTERNET。

依赖

不涉及

约束与限制

1.本示例仅支持标准系统上运行，支持设备：直板机。

2.HarmonyOS系统：HarmonyOS 5.0.5 Release及以上。

3.DevEco Studio版本：DevEco Studio 5.0.5 Release及以上。

4.HarmonyOS SDK版本：HarmonyOS 5.0.5 Release SDK及以上。