HarmonyOS NEXT实战：加载网络页面资源

Question

##HarmonyOS Next实战##HarmonyOS SDK应用服务##教育##

参考资料：
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-page-loading-with-web-components#%E5%8A%A0%E8%BD%BD%E7%BD%91%E7%BB%9C%E9%A1%B5%E9%9D%A2

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

Web(value: WebOptions)

WebOptions：通过接口定义Web选项，属性及含义如下：

src：网页资源地址。src不能通过状态变量（例如：@State）动态更改地址，如需更改，请通过loadUrl()重新加载。
controller：控制器，通过controller可以控制Web组件各种行为（包括页面导航、声明周期状态、JavaScript交互等行为）。
renderMode：表示当前Web组件的渲染方式，RenderMode.ASYNC_RENDER表示Web组件自渲染，RenderMode.SYNC_RENDER表示支持Web组件统一渲染能力，默认值RenderMode.ASYNC_RENDER，该模式不支持动态调整。
incognitoMode：表示当前创建的webview是否是隐私模式。true表示创建隐私模式的webview，false表示创建正常模式的webview。默认值：false。
sharedRenderProcessToken：表示当前Web组件指定共享渲染进程的token，多渲染进程模式下，相同token的Web组件会优先尝试复用与token相绑定的渲染进程。token与渲染进程的绑定发生在渲染进程的初始化阶段。当渲染进程没有关联的Web组件时，其与token绑定关系将被移除。默认值： ""。

加载网络页面资源的前提：
页面加载过程中，若涉及网络资源获取，请在module.json5中配置网络访问权限，添加方法可参考在配置文件中声明权限。

"requestPermissions":[
    {
      "name" : "ohos.permission.INTERNET"
    }
  ]

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

加载指定的URL。

loadUrl(url: string | Resource, headers?: Array): void

url：需要加载的 URL。
headers：URL的附加HTTP请求头。

在下面的示例中，在Web组件加载完“example.com”页面后，开发者可通过loadUrl接口将此Web组件显示页面变更为“example1.com”。

实战代码示例：

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebOnlinePage {
  src: ResourceStr = 'https://m.baidu.com'
  webController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column({ space: 10 }) {
      Text('WebPage')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Row({ space: 10 }){
        Button('加载百度官网')
          .onClick(() => {
            try {
              // 点击按钮时，通过loadUrl，跳转到https://m.baidu.com
              this.webController.loadUrl('https://m.baidu.com');
            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            }
          })
        Button('加载华为开发者官网')
          .onClick(() => {
            try {
              // 点击按钮时，通过loadUrl，跳转到https://developer.huawei.com/
              this.webController.loadUrl('https://developer.huawei.com/');
            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            }
          })
      }

      Web({ src: this.src, controller: this.webController })
        .width('100%')
        .layoutWeight(1)
        .horizontalScrollBarAccess(false)//设置是否显示横向滚动条
        .verticalScrollBarAccess(false) //设置是否显示纵向滚动条
    }
    .height('100%')
    .width('100%')
  }
}