HarmonyOS：使用ArkWeb构建页面

一、简介

   

    页面加载是Web组件的基本功能。根据页面加载数据泉源可以分为三种常用场景，包罗加载网络页面、加载本地页面、加载HTML格式的富文本数据。

页面加载过程中，若涉及网络资源获取，必要设置ohos.permission.INTERNET网络访问权限。
  二、加载网络页面

   开发者可以在Web组件创建时，指定默认加载的网络页面 。在默认页面加载完成后，如果开发者必要变更此Web组件体现的网络页面，可以通过调用loadUrl()接口加载指定的网页。Web组件的第一个参数变量src不能通过状态变量（比方：@State）动态更改地址，如需更改，请通过loadUrl()重新加载。

在下面的示例中，在Web组件加载完“https://www.baidu.com/”页面后，开发者可通过loadUrl接口将此Web组件体现页面变更为“https://www.baidu.com/xxx”。

    提醒：
起首必要在products/default/src/main/module.json5文件中先设置好允许步伐打开网络套接字，即申请权限ohos.permission.INTERNET。

1. "requestPermissions": [
2.       {
3.         "name": "ohos.permission.INTERNET",
4.         "reason": "$string:apply_for_network"
5.       }
6.     ],

复制代码

  

1. {
2.       "name": "apply_for_network",
3.       "value": "允许应用使用网络"
4. }

复制代码

  

  示例代码

1. import { webview } from '@kit.ArkWeb'
2. import { BusinessError } from '@kit.BasicServicesKit';
4. @Entry
5. @Component
6. struct WebComponent {
7.   controller: webview.WebviewController = new webview.WebviewController()
9.   build() {
10.     Column() {
11.       Button('loadUrl').onClick(() => {
13.         try {
14.           // 点击按钮时，通过loadUrl，跳转到 https://developer.huawei.com/consumer/cn/
15.           this.controller.loadUrl('https://developer.huawei.com/consumer/cn/');
16.         } catch (error) {
17.           let e: BusinessError = error as BusinessError;
18.           console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
19.         }
20.       })
21.       Web({
22.         src: 'https://www.baidu.com/',
23.         controller: this.controller
24.       })
25.     }
26.     .height('100%')
27.     .width('100%')
28.   }
29. }

复制代码

  留意
如果盼望看到结果，必要在真机大概模仿器上运行代码，Previewer暂不支持Web组件的预览结果。
  三、加载本地页面

   将本地页面文件放在应用的rawfile目录下，开发者可以在Web组件创建的时间指定默认加载的本地页面 ，而且加载完成后可通过调用loadUrl()接口变更当前Web组件的页面。

在下面的示例中展示加载本地页面文件的方法：

  示例代码

1. import { webview } from '@kit.ArkWeb';
2. import { BusinessError } from '@kit.BasicServicesKit';
3. import { promptAction } from '@kit.ArkUI';
5. // 使用 ArkWeb构建页面 https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101717497640610394
7. @Entry
8. @Component
9. struct WebComponent {
10.   controller: webview.WebviewController = new webview.WebviewController()
11.   //加载网络页面
12.   // private url: string = 'https://www.baidu.com/'
13.   //加载本地页面
14.   private url: Resource = $rawfile("testH.html")
16.   build() {
17.     Column() {
18.       Row() {
19.         Button('loadUrl').onClick(() => {
21.           try {
22.             // 点击按钮时，通过loadUrl，跳转到https://developer.huawei.com/consumer/cn/
23.             // this.controller.loadUrl('https://developer.huawei.com/consumer/cn/');
24.             if (this.controller.accessForward()) {
25.               console.log("执行了 forward")
26.               this.controller.forward()
27.             } else {
28.               console.log("执行了 loadUrl")
29.               this.controller.loadUrl($rawfile("testH2.html"));
30.             }
31.           } catch (error) {
32.             let e: BusinessError = error as BusinessError;
33.             console.error(`loadUrl ErrorCode: ${e.code},  Message: ${e.message}`);
34.           }
35.         }).margin({ right: 20 })
36.         Button('返回').onClick(() => {
37.           try {
38.             if (this.controller.accessBackward()) {
39.               this.controller.backward()
40.             } else {
41.               promptAction.showToast({ message: "已经是首页了" })
42.             }
43.           } catch (error) {
44.             let e: BusinessError = error as BusinessError;
45.             console.error(`返回 ErrorCode: ${e.code},  Message: ${e.message}`);
46.           }
47.         })
48.       }.margin({ top: 20 })
50.       Web({
51.         src: this.url,
52.         controller: this.controller
53.       })
54.     }
55.     .height('100%')
56.     .width('100%')
57.   }
58. }

复制代码

将资源文件放置在应用的resources/rawfile目录下。
   

  结果图
   

  四、加载HTML格式的文本数据

   Web组件可以通过loadData()接口实现加载HTML格式的文本数据。当开发者不必要加载整个页面，只必要体现一些页面片段时，可通过此功能来快速加载页面。

示例代码

1. import { webview } from '@kit.ArkWeb';
2. import { BusinessError } from '@kit.BasicServicesKit';
3. import { promptAction } from '@kit.ArkUI';
5. // 使用 ArkWeb构建页面 https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101717497640610394
7. @Entry
8. @Component
9. struct WebComponent {
10.   controller: webview.WebviewController = new webview.WebviewController()
11.   //加载网络页面
12.   // private url: string = 'https://www.baidu.com/'
13.   //加载本地页面
14.   private url: Resource = $rawfile("testH.html")
16.   build() {
17.     Column() {
18.       Row() {
19.         Button('loadUrl').onClick(() => {
21.           try {
22.             if (this.controller.accessForward()) {
23.               console.log("执行了 forward")
24.               this.controller.forward()
25.             } else {
26.               console.log("执行了 loadUrl")
27.               //加载网络页面
28.               let tempUrl = "https://developer.huawei.com/consumer/cn/"
29.               //加载本地页面
30.               let tempUrlRes = $rawfile("testH2.html")
31.               // this.controller.loadUrl(tempUrlRes);
33.               // 点击按钮时，通过loadData，加载HTML格式的文本数据
34.               this.controller.loadData(
35.                 "<html><body bgcolor="white">Source:<pre>source</pre><p>加载HTML格式的文本数据</P></body></html>",
36.                 "text/html",
37.                 "UTF-8"
38.               );
39.             }
40.           } catch (error) {
41.             let e: BusinessError = error as BusinessError;
42.             console.error(`loadUrl ErrorCode: ${e.code},  Message: ${e.message}`);
43.           }
44.         }).margin({ right: 20 })
45.         Button('返回').onClick(() => {
46.           try {
47.             if (this.controller.accessBackward()) {
48.               this.controller.backward()
49.             } else {
50.               promptAction.showToast({ message: "已经是首页了" })
51.             }
52.           } catch (error) {
53.             let e: BusinessError = error as BusinessError;
54.             console.error(`返回 ErrorCode: ${e.code},  Message: ${e.message}`);
55.           }
56.         })
57.       }.margin({ top: 20 })
59.       Web({
60.         src: this.url,
61.         controller: this.controller
62.       })
63.     }
64.     .height('100%')
65.     .width('100%')
66.   }
67. }

复制代码

结果图
   

  五、动态创建Web组件

   支持命令式创建Web组件，这种方式创建的组件不会立即挂载到组件树，即不会对用户呈现（组件状态为Hidden和InActive），开发者可以在后续使用中按需动态挂载。后台启动的Web实例不建议超过200个。

1. import { createNWeb } from '../pages/web/CommonWeb'
2. // 载体Ability
3. // EntryAbility.ets
4. import { createNWeb } from "../pages/common"
5. onWindowStageCreate(windowStage: window.WindowStage): void {
6.   windowStage.loadContent('pages/Index', (err, data) => {
7.     // 创建Web动态组件（需传入UIContext），loadContent之后的任意时机均可创建
8.     createNWeb("https://www.example.com", windowStage.getMainWindowSync().getUIContext());
9.     if (err.code) {
10.       return;
11.     }
12.   });
13. }

复制代码

CommonWeb.ets代码

1. import { webview } from '@kit.ArkWeb'
2. import { NodeController, BuilderNode, Size, FrameNode, UIContext } from '@kit.ArkUI';
4. /*
5.   动态创建Web组件 https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101717497640610394
6. 支持命令式创建Web组件，这种方式创建的组件不会立即挂载到组件树，即不会对用户呈现（组件状态为Hidden和InActive），
7. 开发者可以在后续使用中按需动态挂载。后台启动的Web实例不建议超过200个。
8. */
10. // @Builder中为动态组件的具体组件内容
11. // Data为入参封装类
12. class Data {
13.   url: string = "https://developer.huawei.com/consumer/cn/";
14.   controller: WebviewController = new webview.WebviewController();
15. }
17. @Builder
18. function WebBuilder(data: Data) {
19.   Column() {
20.     Web({ src: data.url, controller: data.controller })
21.       .width("100%")
22.       .height("100%")
23.   }
24. }
26. let wrap = wrapBuilder<Data[]>(WebBuilder);
28. // 用于控制和反馈对应的NodeContainer上的节点的行为，需要与NodeContainer一起使用
29. export class myNodeController extends NodeController {
30.   private rootnode: BuilderNode<Data[]> | null = null;
32.   // 必须要重写的方法，用于构建节点数、返回节点挂载在对应NodeContainer中
33.   // 在对应NodeContainer创建的时候调用、或者通过rebuild方法调用刷新
34.   makeNode(uiContext: UIContext): FrameNode | null {
35.     console.log(" uicontext is undefined : " + (uiContext === undefined));
36.     if (this.rootnode != null) {
37.       // 返回FrameNode节点
38.       return this.rootnode.getFrameNode();
39.     }
40.     // 返回null控制动态组件脱离绑定节点
41.     return null;
42.   }
44.   // 当布局大小发生变化时进行回调
45.   aboutToResize(size: Size) {
46.     console.log("aboutToResize width : " + size.width + " height : " + size.height)
47.   }
49.   // 当controller对应的NodeContainer在Appear的时候进行回调
50.   aboutToAppear() {
51.     console.log("aboutToAppear")
52.   }
54.   // 当controller对应的NodeContainer在Disappear的时候进行回调
55.   aboutToDisappear() {
56.     console.log("aboutToDisappear")
57.   }
59.   // 此函数为自定义函数，可作为初始化函数使用
60.   // 通过UIContext初始化BuilderNode，再通过BuilderNode中的build接口初始化@Builder中的内容
61.   initWeb(url: string, uiContext: UIContext, control: WebviewController) {
62.     if (this.rootnode != null) {
63.       return;
64.     }
65.     // 创建节点，需要uiContext
66.     this.rootnode = new BuilderNode(uiContext)
67.     // 创建动态Web组件
68.     this.rootnode.build(wrap, { url: url, controller: control })
69.   }
70. }
72. // 创建Map保存所需要的NodeController
73. let NodeMap: Map<string, myNodeController | undefined> = new Map();
74. // 创建Map保存所需要的WebViewController
75. let controllerMap: Map<string, WebviewController | undefined> = new Map();
77. // 初始化需要UIContext 需在Ability获取
78. export const createNWeb = (url: string, uiContext: UIContext) => {
79.   // 创建NodeController
80.   let baseNode = new myNodeController();
81.   let controller = new webview.WebviewController();
82.   // 初始化自定义Web组件
83.   baseNode.initWeb(url, uiContext, controller);
84.   controllerMap.set(url, controller)
85.   NodeMap.set(url, baseNode);
86. }
88. // 自定义获取NodeController接口
89. export const getNWeb = (url: string): myNodeController | undefined => {
90.   return NodeMap.get(url);
91. }

复制代码

WebIndex.ets代码

1. // 使用NodeController的Page页
2. // WebIndex.ets
3. import { getNWeb } from "./CommonWeb"
4. @Entry
5. @Component
6. struct WebIndex {
7.   build() {
8.     Row() {
9.       Column() {
10.         // NodeContainer用于与NodeController节点绑定，rebuild会触发makeNode
11.         // Page页通过NodeContainer接口绑定NodeController，实现动态组件页面显示
12.         NodeContainer(getNWeb("https://developer.huawei.com/consumer/cn/develop/"))
13.           .height("90%")
14.           .width("100%")
15.       }
16.       .width('100%')
17.     }
18.     .height('100%')
19.   }
20. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。