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