1# AtomicServiceWeb 2 3为开发者提供满足定制化诉求的Web高阶组件，屏蔽原生Web组件中无需关注的接口，并提供JS扩展能力。 4 5> **说明：** 6> 7> - 该组件从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> - 示例效果请以真机运行为准，当前DevEco Studio预览器不支持。 9 10## 需要权限 11 12访问在线网页时需添加网络权限：ohos.permission.INTERNET，具体申请方式请参考[声明权限](../../../security/AccessToken/declare-permissions.md)。 13 14## 导入模块 15 16``` 17import { AtomicServiceWeb } from '@kit.ArkUI'; 18``` 19 20## 子组件 21 22无 23 24## 属性 25 26不支持[通用属性](ts-universal-attributes-size.md) 27 28## AtomicServiceWeb 29 30``` 31AtomicServiceWeb({ 32 src: ResourceStr, 33 controller: AtomicServiceWebController, 34 navPathStack?: NavPathStack, 35 mixedMode?: MixedMode, 36 darkMode?: WebDarkMode, 37 forceDarkAccess?: boolean, 38 onMessage?: Callback<OnMessageEvent>, 39 onErrorReceive?: Callback<OnErrorReceiveEvent>, 40 onHttpErrorReceive?: Callback<OnHttpErrorReceiveEvent>, 41 onPageBegin?: Callback<OnPageBeginEvent>, 42 onPageEnd?: Callback<OnPageEndEvent>, 43 onControllerAttached?: Callback<void>, 44 onLoadIntercept?: Callback<OnLoadInterceptEvent, boolean>, 45 onProgressChange?: Callback<OnProgressChangeEvent> 46}) 47``` 48 49**装饰器类型：**@Component 50 51**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 52 53**系统能力：** SystemCapability.ArkUI.ArkUI.Full 54 55**参数**： 56 57| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 58|----------------------|------------------------------------------------------------------------------------------------------------------|----|-------------|----------------------------------------------------------------------------------------------------------------------| 59| src | [ResourceStr](ts-types.md#resourcestr) | 是 | - | 网页资源地址，访问网络资源需要在AGC配置业务域名，访问本地资源仅支持包内文件（$rawfile）。不支持通过状态变量（例如@State）动态更新地址。加载的网页中支持通过JS SDK提供的接口调用系统能力，具体以JS SDK为准。 | 60| controller | [AtomicServiceWebController](#atomicservicewebcontroller) | 是 | @ObjectLink | 通过AtomicServiceWebController可以控制AtomicServiceWeb组件各种行为。 | 61| navPathStack | [NavPathStack](ts-basic-components-navigation.md#navpathstack10) | 否 | - | 路由栈信息。当使用NavDestination作为页面的根容器时，需传入NavDestination容器对应的NavPathStack处理页面路由。 | 62| mixedMode | [MixedMode](../../apis-arkweb/ts-basic-components-web.md#mixedmode枚举说明) | 否 | @Prop | 设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。 | 63| darkMode | [WebDarkMode](../../apis-arkweb/ts-basic-components-web.md#webdarkmode9枚举说明) | 否 | @Prop | 设置Web深色模式，默认关闭。 | 64| forceDarkAccess | boolean | 否 | @Prop | 设置网页是否开启强制深色模式。默认关闭。该属性仅在darkMode开启深色模式时生效。 | 65| onMessage | Callback\<[OnMessageEvent](#onmessageevent)\> | 否 | - | H5页面通过JS SDK的postMessage()发送消息后，Web组件对应的页面返回或销毁时，触发该回调。 | 66| onErrorReceive | Callback\<[OnErrorReceiveEvent](#onerrorreceiveevent)\> | 否 | - | 网页加载遇到错误时触发该回调。出于性能考虑，建议此回调中尽量执行简单逻辑。在无网络的情况下，触发此回调。 | 67| onHttpErrorReceive | Callback\<[OnHttpErrorReceiveEvent](#onhttperrorreceiveevent)\> | 否 | - | 网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调。 | 68| onPageBegin | Callback\<[OnPageBeginEvent](#onpagebeginevent)\> | 否 | - | 网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。 | 69| onPageEnd | Callback\<[OnPageEndEvent](#onpageendevent)\> | 否 | - | 网页加载完成时触发该回调，且只在主frame触发。 | 70| onControllerAttached | Callback\<void\> | 否 | - | 当Controller成功绑定到Web组件时触发该回调。 | 71| onLoadIntercept | [OnLoadInterceptCallback](#onloadinterceptcallback) | 否 | - | 当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。 | 72| onProgressChange | Callback\<[OnProgressChangeEvent](../../apis-arkweb/ts-basic-components-web.md#onprogresschangeevent12)\> | 否 | - | 网页加载进度变化时触发该回调。 | 73 74## AtomicServiceWebController 75 76通过AtomicServiceWebController可以控制AtomicServiceWeb组件各种行为。一个AtomicServiceWebController对象只能控制一个AtomicServiceWeb组件，且必须在AtomicServiceWeb组件和AtomicServiceWebController绑定后，才能调用AtomicServiceWebController上的方法。 77 78**装饰器类型：** @Observed 79 80**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 81 82**系统能力：** SystemCapability.ArkUI.ArkUI.Full 83 84### getUserAgent 85 86getUserAgent(): string 87 88获取当前默认用户代理。 89 90**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 91 92**系统能力：** SystemCapability.ArkUI.ArkUI.Full 93 94**返回值：** 95 96| 类型 | 说明 | 97|--------|---------| 98| string | 默认用户代理。 | 99 100**错误码：** 101 102以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md)。 103 104| 错误码ID | 错误信息 | 105|----------|--------------------------------------------------------------------------------------------------| 106| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 107 108### getCustomUserAgent 109 110getCustomUserAgent(): string 111 112获取自定义用户代理。 113 114**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 115 116**系统能力：** SystemCapability.ArkUI.ArkUI.Full 117 118**返回值：** 119 120| 类型 | 说明 | 121|--------|------------| 122| string | 用户自定义代理信息。 | 123 124**错误码：** 125 126以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 127 128| 错误码ID | 错误信息 | 129|----------|--------------------------------------------------------------------------------------------------| 130| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 131 132### setCustomUserAgent 133 134setCustomUserAgent(userAgent: string): void 135 136设置自定义用户代理，会覆盖系统的用户代理。 137 138建议在onControllerAttached回调事件中设置UserAgent，设置方式请参考示例。不建议将UserAgent设置在onLoadIntercept回调事件中，会概率性出现设置失败。 139 140> **说明：** 141> 142>当Web组件src设置了url，且未在onControllerAttached回调事件中设置UserAgent。再调用setCustomUserAgent方法时，可能会出现加载的页面与实际设置UserAgent不符的异常现象。 143 144**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 145 146**系统能力：** SystemCapability.ArkUI.ArkUI.Full 147 148**参数：** 149 150| 参数名 | 类型 | 必填 | 说明 | 151|-----------|--------|----|--------------------------------------------------------------------------| 152| userAgent | string | 是 | 用户自定义代理信息。建议先使用[getUserAgent](#getuseragent)获取当前默认用户代理，在此基础上追加自定义用户代理信息。 | 153 154**错误码：** 155 156以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 157 158| 错误码ID | 错误信息 | 159|----------|--------------------------------------------------------------------------------------------------| 160| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. | 161| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 162 163### refresh 164 165refresh(): void 166 167调用此接口通知AtomicServiceWeb组件刷新网页。 168 169**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 170 171**系统能力：** SystemCapability.ArkUI.ArkUI.Full 172 173**错误码：** 174 175以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 176 177| 错误码ID | 错误信息 | 178|----------|--------------------------------------------------------------------------------------------------| 179| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 180 181### forward 182 183forward(): void 184 185按照历史栈，前进一个页面。一般结合[accessForward](#accessforward)一起使用。 186 187**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 188 189**系统能力：** SystemCapability.ArkUI.ArkUI.Full 190 191**错误码：** 192 193以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 194 195| 错误码ID | 错误信息 | 196|----------|--------------------------------------------------------------------------------------------------| 197| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 198 199### backward 200 201backward(): void 202 203按照历史栈，后退一个页面。一般结合[accessBackward](#accessbackward)一起使用。 204 205**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 206 207**系统能力：** SystemCapability.ArkUI.ArkUI.Full 208 209**错误码：** 210 211以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 212 213| 错误码ID | 错误信息 | 214|----------|--------------------------------------------------------------------------------------------------| 215| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 216 217### accessForward 218 219accessForward(): boolean 220 221当前页面是否可前进，即当前页面是否有前进历史记录。 222 223**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 224 225**系统能力：** SystemCapability.ArkUI.ArkUI.Full 226 227**返回值：** 228 229| 类型 | 说明 | 230|---------|-----------------------| 231| boolean | 可以前进返回true，否则返回false。 | 232 233**错误码：** 234 235以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 236 237| 错误码ID | 错误信息 | 238|----------|--------------------------------------------------------------------------------------------------| 239| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 240 241### accessBackward 242 243accessBackward(): boolean 244 245当前页面是否可后退，即当前页面是否有返回历史记录。 246 247**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 248 249**系统能力：** SystemCapability.ArkUI.ArkUI.Full 250 251**返回值：** 252 253| 类型 | 说明 | 254|---------|-----------------------| 255| boolean | 可以后退返回true，否则返回false。 | 256 257**错误码：** 258 259以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 260 261| 错误码ID | 错误信息 | 262|----------|--------------------------------------------------------------------------------------------------| 263| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 264 265### accessStep 266 267accessStep(step: number): boolean 268 269当前页面是否可前进或者后退给定的step步。 270 271**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 272 273**系统能力：** SystemCapability.ArkUI.ArkUI.Full 274 275**参数：** 276 277| 参数名 | 类型 | 必填 | 说明 | 278|------|--------|----|-----------------------| 279| step | number | 是 | 要跳转的步数，正数代表前进，负数代表后退。 | 280 281**返回值：** 282 283| 类型 | 说明 | 284|---------|-----------| 285| boolean | 页面是否可前进或者后退给定的step步 | 286 287**错误码：** 288 289以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 290 291| 错误码ID | 错误信息 | 292|----------|--------------------------------------------------------------------------------------------------| 293| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | 294| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 295 296### loadUrl 297 298loadUrl(url: string | Resource, headers?: Array\<WebHeader>): void 299 300加载指定的URL。 301 302**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 303 304**系统能力：** SystemCapability.ArkUI.ArkUI.Full 305 306**参数：** 307 308| 参数名 | 类型 | 必填 | 说明 | 309|---------|---------------------------------|----|:---------------| 310| url | string \| [Resource](../../apis-arkui/arkui-ts/ts-types.md#resource) | 是 | 需要加载的 URL。 | 311| headers | Array\<[WebHeader](#webheader)> | 否 | URL的附加HTTP请求头。 | 312 313**错误码：** 314 315以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 316 317| 错误码ID | 错误信息 | 318|----------|--------------------------------------------------------------------------------------------------| 319| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | 320| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 321| 17100002 | Invalid url. | 322| 17100003 | Invalid resource path or file type. | 323 324## WebHeader 325 326Web组件返回的请求/响应头对象。 327 328**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 329 330**系统能力：** SystemCapability.ArkUI.ArkUI.Full 331 332| 名称 | 类型 | 可读 | 可写 | 说明 | 333|-------------|--------|----|----|---------------| 334| headerKey | string | 是 | 是 | 请求/响应头的key。 | 335| headerValue | string | 是 | 是 | 请求/响应头的value。 | 336 337## OnMessageEvent 338 339定义页面回退或销毁时触发该回调。 340 341**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 342 343**系统能力：** SystemCapability.ArkUI.ArkUI.Full 344 345| 名称 | 类型 | 必填 | 说明 | 346|------|----------|----|-------| 347| data | object[] | 是 | 消息列表。 | 348 349## OnErrorReceiveEvent 350 351定义网页加载遇到错误时触发该回调。 352 353**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 354 355**系统能力：** SystemCapability.ArkUI.ArkUI.Full 356 357| 名称 | 类型 | 必填 | 说明 | 358|---------|---------------------------------------------------------------------------------------|----|-----------------| 359| request | [WebResourceRequest](../../apis-arkweb/ts-basic-components-web.md#webresourcerequest) | 是 | 网页请求的封装信息。 | 360| error | [WebResourceError](../../apis-arkweb/ts-basic-components-web.md#webresourceerror) | 是 | 网页加载资源错误的封装信息 。 | 361 362## OnHttpErrorReceiveEvent 363 364定义网页收到加载资源加载HTTP错误时触发。 365 366**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 367 368**系统能力：** SystemCapability.ArkUI.ArkUI.Full 369 370| 名称 | 类型 | 必填 | 说明 | 371|----------|-----------------------------------------------------------------------------------------|----|------------| 372| request | [WebResourceRequest](../../apis-arkweb/ts-basic-components-web.md#webresourcerequest) | 是 | 网页请求的封装信息。 | 373| response | [WebResourceResponse](../../apis-arkweb/ts-basic-components-web.md#webresourceresponse) | 是 | 资源响应的封装信息。 | 374 375## OnPageBeginEvent 376 377定义网页加载开始时触发的函数。 378 379**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 380 381**系统能力：** SystemCapability.ArkUI.ArkUI.Full 382 383| 名称 | 类型 | 必填 | 说明 | 384|-----|--------|----|-----------| 385| url | string | 是 | 页面的URL地址。 | 386 387## OnPageEndEvent 388 389定义网页加载结束时触发的函数。 390 391**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 392 393**系统能力：** SystemCapability.ArkUI.ArkUI.Full 394 395| 名称 | 类型 | 必填 | 说明 | 396|-----|--------|----|-----------| 397| url | string | 是 | 页面的URL地址。 | 398 399## OnLoadInterceptEvent 400 401当资源加载被拦截时，加载拦截事件。 402 403**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 404 405**系统能力：** SystemCapability.ArkUI.ArkUI.Full 406 407| 名称 | 类型 | 必填 | 说明 | 408| -------------- | ---- | ---- | ---------------------------------------- | 409| data | [WebResourceRequest](../../apis-arkweb/ts-basic-components-web.md#webresourcerequest) | 是 | 网页请求的封装信息。 | 410 411## OnProgressChangeEvent 412 413定义网页加载进度变化时触发该回调。 414 415**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 416 417**系统能力：** SystemCapability.ArkUI.ArkUI.Full 418 419| 名称 | 类型 | 必填 | 说明 | 420| -------------- | ---- | ---- | ---------------------------------------- | 421| newProgress | number | 是 | 新的加载进度，取值范围为0到100的整数。 | 422 423## OnLoadInterceptCallback 424 425type OnLoadInterceptCallback = (event: OnLoadInterceptEvent) => boolean 426 427资源加载被拦截时触发该回调。 428 429**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 430 431**系统能力：** SystemCapability.ArkUI.ArkUI.Full 432 433**参数：** 434 435| 参数名 | 类型 | 必填 | 说明 | 436|------|--------|----|-----------------------| 437| event | OnLoadInterceptEvent | 是 | 当资源加载被拦截时，加载拦截事件。 | 438 439**返回值：** 440 441| 类型 | 说明 | 442|---------|-----------| 443| boolean | 返回资源是否被拦截 | 444 445## 事件 446 447不支持[通用事件](ts-universal-events-click.md) 448 449## 示例 450 451### 示例1 452 453加载本地网页。 454 455```ts 456// xxx.ets 457import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI'; 458 459@Entry 460@Component 461struct WebComponent { 462 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 463 464 build() { 465 Column() { 466 AtomicServiceWeb({ src: $rawfile("index.html"), controller: this.controller }) 467 } 468 } 469} 470``` 471 472### 示例2 473 474加载在线网页。 475 476```ts 477// xxx.ets 478import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI'; 479 480@Entry 481@Component 482struct WebComponent { 483 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 484 485 build() { 486 Column() { 487 AtomicServiceWeb({ src: 'https://www.example.com', controller: this.controller }) 488 } 489 } 490} 491``` 492 493### 示例3 494 495NavDestination容器中加载网页。 496 497```ts 498// xxx.ets 499import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI'; 500 501@Builder 502export function WebComponentBuilder(name: string, param: Object) { 503 WebComponent() 504} 505 506@Component 507struct WebComponent { 508 navPathStack: NavPathStack = new NavPathStack(); 509 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 510 511 build() { 512 NavDestination() { 513 AtomicServiceWeb({ src: $rawfile("index.html"), controller: this.controller, navPathStack: this.navPathStack }) 514 } 515 .onReady((context: NavDestinationContext) => { 516 this.navPathStack = context.pathStack; 517 }) 518 } 519} 520``` 521 522### 示例4 523 524设置onMessage()事件回调。 525 526```ts 527// xxx.ets 528import { AtomicServiceWeb, AtomicServiceWebController, OnMessageEvent } from '@kit.ArkUI'; 529 530@Entry 531@Component 532struct WebComponent { 533 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 534 535 build() { 536 Column() { 537 AtomicServiceWeb({ 538 src: $rawfile("index.html"), 539 controller: this.controller, 540 // H5页面点击“发送消息”后，再点击“返回上一页”，触发该回调 541 onMessage: (event: OnMessageEvent) => { 542 console.info(`[AtomicServiceWebLog] onMessage data = ${JSON.stringify(event.data)}`); 543 } 544 }) 545 } 546 } 547} 548``` 549 550```html 551// index.html 552<!DOCTYPE html> 553<html> 554<meta charset="utf-8"> 555<!-- 引入JS SDK文件 --> 556<script src="../js/atomicservice-sdk.js" type="text/javascript"></script> 557<body> 558<h1>JS SDK - postMessage()</h1> 559<br/> 560<button type="button" onclick="postMessage({ name: 'Jerry', age: 18 });">发送消息</button> 561<br/> 562<button type="button" onclick="back();">返回上一页</button> 563</body> 564<script type="text/javascript"> 565 function postMessage(data) { 566 // JS SDK提供的发送消息接口 567 has.asWeb.postMessage({ 568 data: data, 569 callback: (err, res) => { 570 if (err) { 571 console.error(`[AtomicServiceWebLog H5] postMessage error err. Code: ${err.code}, message: ${err.message}`); 572 } else { 573 console.info(`[AtomicServiceWebLog H5] postMessage success res = ${JSON.stringify(res)}`); 574 } 575 } 576 }); 577 } 578 579 function back() { 580 // JS SDK提供的Router路由回退接口 581 has.router.back({ 582 delta: 1 583 }); 584 } 585</script> 586</html> 587``` 588 589### 示例5 590 591设置网页加载事件回调。 592 593```ts 594// xxx.ets 595import { 596 AtomicServiceWeb, 597 AtomicServiceWebController, 598 OnErrorReceiveEvent, 599 OnHttpErrorReceiveEvent, 600 OnPageBeginEvent, 601 OnPageEndEvent 602} from '@kit.ArkUI'; 603 604@Entry 605@Component 606struct WebComponent { 607 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 608 609 build() { 610 Column() { 611 AtomicServiceWeb({ 612 src: $rawfile('index.html'), 613 controller: this.controller, 614 // 网页加载遇到错误时触发该回调 615 onErrorReceive: (event: OnErrorReceiveEvent) => { 616 console.info(`AtomicServiceWebLog onErrorReceive event = ${JSON.stringify({ 617 requestUrl: event.request?.getRequestUrl(), 618 requestMethod: event.request?.getRequestMethod(), 619 errorCode: event.error?.getErrorCode(), 620 errorInfo: event.error?.getErrorInfo() 621 })}`); 622 }, 623 // 网页加载遇到HTTP资源加载错误时触发该回调 624 onHttpErrorReceive: (event: OnHttpErrorReceiveEvent) => { 625 console.info(`AtomicServiceWebLog onHttpErrorReceive event = ${JSON.stringify({ 626 requestUrl: event.request?.getRequestUrl(), 627 requestMethod: event.request?.getRequestMethod(), 628 responseCode: event.response?.getResponseCode(), 629 responseData: event.response?.getResponseData(), 630 })}`); 631 }, 632 // 页面开始加载，触发该回调 633 onPageBegin: (event: OnPageBeginEvent) => { 634 console.info(`AtomicServiceWebLog onPageBegin event = ${JSON.stringify({ 635 url: event.url 636 })}`); 637 }, 638 // 页面加载完成，触发该回调 639 onPageEnd: (event: OnPageEndEvent) => { 640 console.info(`AtomicServiceWebLog onPageEnd event = ${JSON.stringify({ 641 url: event.url 642 })}`); 643 } 644 }) 645 } 646 } 647} 648``` 649 650### 示例6 651 652AtomicServiceWeb跟AtomicServiceWebController的使用示例。 653 654```ts 655// xxx.ets 656import { 657 AtomicServiceWeb, 658 AtomicServiceWebController, 659 OnErrorReceiveEvent, 660 OnHttpErrorReceiveEvent, 661 OnPageBeginEvent, 662 OnPageEndEvent, 663 OnMessageEvent, 664 OnLoadInterceptEvent, 665 OnProgressChangeEvent 666} from '@kit.ArkUI'; 667 668@Entry 669@Component 670struct WebComponent { 671 @State darkMode: WebDarkMode = WebDarkMode.On; 672 @State forceDarkAccess: boolean = true; 673 @State mixedMode: MixedMode = MixedMode.None; 674 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 675 @State num: number = 1; 676 677 build() { 678 Column() { 679 Button('accessForward').onClick(() => { 680 console.info(`AtomicServiceWebLog accessForward = ${this.controller.accessForward()}`); 681 }) 682 Button('accessBackward').onClick(() => { 683 console.info(`AtomicServiceWebLog accessBackward = ${this.controller.accessBackward()}`); 684 }) 685 Button('accessStep').onClick(() => { 686 console.info(`AtomicServiceWebLog accessStep = ${this.controller.accessStep(1)}`); 687 }) 688 Button('forward').onClick(() => { 689 console.info(`AtomicServiceWebLog forward = ${this.controller.forward()}`); 690 }) 691 Button('backward').onClick(() => { 692 console.info(`AtomicServiceWebLog backward = ${this.controller.backward()}`); 693 }) 694 Button('refresh').onClick(() => { 695 console.info(`AtomicServiceWebLog refresh = ${this.controller.refresh()}`); 696 }) 697 Button('loadUrl').onClick(() => { 698 console.info(`AtomicServiceWebLog loadUrl = ${this.controller.loadUrl('https://www.baidu.com/')}`); 699 }) 700 Button('深色模式').onClick(() => { 701 this.forceDarkAccess = !this.forceDarkAccess; 702 }) 703 Button('mixedMode').onClick(() => { 704 this.mixedMode = this.mixedMode == MixedMode.None ? MixedMode.All : MixedMode.None; 705 }) 706 Button('点击').onClick(() => { 707 console.info(`AtomicServiceWebLog getUserAgent = ${this.controller.getUserAgent()}`); 708 console.info(`AtomicServiceWebLog getCustomUserAgent = ${this.controller.getCustomUserAgent()}`); 709 this.controller.setCustomUserAgent('test' + this.num++); 710 711 console.info(`AtomicServiceWebLog getUserAgent after set = ${this.controller.getUserAgent()}`); 712 console.info(`AtomicServiceWebLog getCustomUserAgent after set = ${this.controller.getCustomUserAgent()}`); 713 }) 714 AtomicServiceWeb({ 715 src: 'https://www.example.com', 716 mixedMode: this.mixedMode, 717 darkMode: this.darkMode, 718 forceDarkAccess: this.forceDarkAccess, 719 controller: this.controller, 720 onControllerAttached: () => { 721 console.info("AtomicServiceWebLog onControllerAttached call back success"); 722 }, 723 onLoadIntercept: (event: OnLoadInterceptEvent) => { 724 console.info("AtomicServiceWebLog onLoadIntercept call back success " + JSON.stringify({ 725 getRequestUrl: event.data.getRequestUrl(), 726 getRequestMethod: event.data.getRequestMethod(), 727 getRequestHeader: event.data.getRequestHeader(), 728 isRequestGesture: event.data.isRequestGesture(), 729 isMainFrame: event.data.isMainFrame(), 730 isRedirect: event.data.isRedirect(), 731 })) 732 return false; 733 }, 734 onProgressChange: (event: OnProgressChangeEvent) => { 735 console.info("AtomicServiceWebLog onProgressChange call back success " + JSON.stringify(event)); 736 }, 737 onMessage: (event: OnMessageEvent) => { 738 console.info("onMessage call back success " + JSON.stringify(event)); 739 }, 740 onPageBegin: (event: OnPageBeginEvent) => { 741 console.info("onPageBegin call back success " + JSON.stringify(event)); 742 }, 743 onPageEnd: (event: OnPageEndEvent) => { 744 console.info("onPageEnd call back success " + JSON.stringify(event)); 745 }, 746 onHttpErrorReceive: (event: OnHttpErrorReceiveEvent) => { 747 console.info("onHttpErrorReceive call back success " + JSON.stringify(event)); 748 }, 749 onErrorReceive: (event: OnErrorReceiveEvent) => { 750 console.info("onErrorReceive call back success " + JSON.stringify(event)); 751 } 752 }) 753 } 754 } 755} 756```