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