在离线场景NodeController中创建webview组件

创建预先指定url的webview可以，但是后续在真实使用时如何再获取到web组件并进行后续的数据更新以及jsbridge通信？

场景中需要使用webController再进行后续的操作，并且无法预知具体要加载哪个url。测试发现创建webview组件非常慢，可否只预先创建webview，使能够获取到webview？

HarmonyOS

胖头鱼圆滚滚

2024-05-07 22:00:59

浏览

回答 1

按赞同

按时间

单花红丝线

动态创建组件已支持，请参考以下链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-page-loading-with-web-components-0000001820999889#ZH-CN_TOPIC_0000001820999889__动态创建web组件

1.可以根据业务逻辑提炼共同的模板，一般共同的模块的页面的url基本一致只是最后可能有个id不一样，可以通过预先加载这个模块，然后再通过具体的url里面的id去加载数据.

2.动态创建web组件就是预先创建webview。不一定要url，可以传空.

3.怎么获取webview，依赖业务自己怎么存储和管理webview，示例中是以url作为key值存在map里，所以就通过url去拿，业务自己可以用不同的逻辑去管理webview

4.有WebviewController，可以对web组件做操作

提供核心代码如下：

@Builder 
export function WebBuilder(builderData: BuilderData) { 
  Column() { 
    Text('WebBuilder内部') 
    Web({ src: builderData.url, controller: builderData.controller }) 
      .fileAccess(true) 
      .domStorageAccess(true) 
      .mixedMode(MixedMode.All) 
      .databaseAccess(true) 
      .geolocationAccess(true) 
      .javaScriptAccess(true) 
      .onClick(event => { 
        Logger.info("11111111111") 
      }) 
      .onConsole((event) => { 
        Logger.info(TAG, '[WEB] : ' + event?.message.getMessage()); 
        // This interface is used to notify the host application of the JS console message. 
        // If true is returned, the message is printed to the console. 
        return false 
      }) 
      .zoomAccess(false)// 设置是否支持手势进行缩放，默认允许执行缩放。 
      .horizontalScrollBarAccess(false)// 设置是否显示横向滚动条，默认显示。 
      .onInterceptRequest((event) => { 
        if (event) { 
          return GlobalRouter.getInstance().onInterceptRequest(event.request); 
        } 
        return null; 
      }) 
      .onPageVisible(() => { 
        if (RouterStorage.getInstance().getRouteType() !== RouteType.MULTI_MULTI) { 
          NavigationController.getInstance().loading(false) 
        } 
        Logger.info(TAG, '[WEB] : onPageVisible'); 
      }) 
      .onPageEnd(() => { 
        if (RouterStorage.getInstance().getRouteType() === RouteType.MULTI_MULTI) { 
          NavigationController.getInstance().loading(false) 
        } 
        Logger.info(TAG, '[WEB] : onPageEnd'); 
      }) 
      .onResourceLoad((event) => { 
        //Logger.info(TAG, '[WEB] : onResourceLoad : ' + event.url); 
      }) 
      .onLoadIntercept((event) => { 
        if (event) { 
          return GlobalRouter.getInstance().router(event.data); 
        } 
        return false; 
      }) 
      .onPageBegin(() => { 
        Logger.info(TAG, '[WEB] : onPageBegin'); 
      }) 
 
      .javaScriptOnDocumentStart([{ 
        script: JsBridge.getJsBridgeScript(builderData.webId.toString()), scriptRules: [Constant.ASTERISK] }]) 
      .onControllerAttached(() => { 
        builderData.controller.registerJavaScriptProxy(WebAdapter.getInstance(), Constant.WEB_ADAPTER, [Constant.RUN]); 
        Logger.info(TAG, '[WEB] : onControllerAttached'); 
      }) 
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.

2024-05-08 15:58:08

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

在离线场景NodeController中创建webview组件

订阅鸿蒙技术特刊，精选内容抢先看