当前位置：首页 > news >正文

HarmonyOS ArkWeb 系列之动态组件预创建：提前准备好 Web 实例，打开即渲染

news 2026/7/22 5:57:24

文章目录

- 大白话讲原理
- 流程图
- 核心代码
- - DynamicComponent.ets — 组件创建与管理
  - BusinessWebview.ets — 业务 Web 组件定义
  - 业务页面 — 使用预创建组件
- 注意事项

前面讲的预连接、预获取，都是在网络层面优化。但 Web 组件本身的初始化也需要时间——创建内核、解析 HTML、布局渲染。动态组件预创建让你提前把 Web 实例准备好，用户打开时直接展示已渲染的内容。

大白话讲原理

想象一下餐厅备餐：

没有预创建：顾客点餐 → 厨师开始备料 → 烹饪 → 上菜（等很久）
有预创建：提前备好菜 → 顾客点餐 → 直接上菜

动态组件预创建就是让 Web 实例在"后台"默默初始化，等用户需要时，把已经准备好的实例"端上去"显示。

流程图

核心代码

DynamicComponent.ets — 组件创建与管理

// DynamicComponent.etsimport{webview}from'@kit.ArkWeb';import{NodeController,BuilderNode,FrameNode,UIContext}from'@kit.ArkUI';exportinterfaceBuilderData{url:string;controller:webview.WebviewController;context:UIContext;}// 存储预创建的节点constpreloadNodeMap=newMap<string,BuilderNode<BuilderData[]>>();exportclassWebNodeControllerextendsNodeController{privatebuilderNode:BuilderNode<BuilderData[]>|null=null;constructor(node:BuilderNode<BuilderData[]>){super();this.builderNode=node;}makeNode(uiContext:UIContext):FrameNode|null{returnthis.builderNode?.getFrameNode()??null;}}// 预创建 Web 实例（后台）exportfunctioninitWebComponent(url:string,webBuilder:WrappedBuilder<BuilderData[]>,uiContext:UIContext):void{if(preloadNodeMap.has(url))return;// 已预创建，不重复constcontroller=newwebview.WebviewController();constbuilderNode=newBuilderNode<BuilderData[]>(uiContext);builderNode.build(webBuilder,{url,controller,context:uiContext});preloadNodeMap.set(url,builderNode);}// 获取预创建的 NodeControllerexportfunctiongetPreloadNodeController(url:string):WebNodeController|null{constnode=preloadNodeMap.get(url);returnnode?newWebNodeController(node):null;}

BusinessWebview.ets — 业务 Web 组件定义

// BusinessWebview.etsimport{BuilderData}from'./DynamicComponent';@BuilderfunctionwebBuilder(data:BuilderData){Web({src:data.url,controller:data.controller}).cacheMode(CacheMode.Default)}exportconstbusinessWebview=wrapBuilder<BuilderData[]>(webBuilder);

业务页面 — 使用预创建组件

// Index.etsimport{webview}from'@kit.ArkWeb';import{initWebComponent,getPreloadNodeController,WebNodeController}from'./DynamicComponent';import{businessWebview}from'./BusinessWebview';@Entry@Componentstruct BusinessPage{@StatenodeController:WebNodeController|null=null;privatetargetUrl:string='https://www.example.com';aboutToAppear():void{// 确保预创建完成initWebComponent(this.targetUrl,businessWebview,this.getUIContext());// 获取预创建节点this.nodeController=getPreloadNodeController(this.targetUrl);}build(){Column(){if(this.nodeController){// 挂载预创建的 Web 实例，直接显示已渲染内容NodeContainer(this.nodeController).width('100%').height('100%')}else{// 降级：正常创建Web({src:this.targetUrl,controller:newwebview.WebviewController()}).width('100%').height('100%')}}.width('100%').height('100%')}}