web组件

如何实现对网页上的资源在鸿蒙里实现渲染出来呢？

基本步骤

1. 需要网络权限

访问在线网页时需添加网络权限：ohos.permission.INTERNET，具体申请方式请参考声明权限。

2. 导入模块

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

3. 在使用web组件的时候需要实例化一个web组件的控制器

controller: webview.WebviewController = new webview.WebviewController();

4. 与web组件进行绑定

Web({ src: 'www.example.com', controller: this.controller })

5. web组件的参数

参数名	参数类型	必填	参数描述
src	ResourceStr	是	网页资源地址。如果访问本地资源文件，请使用$rawfile或者resource协议。如果加载应用包外沙箱路径的本地资源文件(文件支持html和txt类型)，请使用file://沙箱文件路径。src不能通过状态变量（例如：@State）动态更改地址，如需更改，请通过loadUrl()重新加载。
controller	WebviewController9+	WebController	是	控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。
renderMode12+	RenderMode	否	表示当前Web组件的渲染方式，RenderMode.ASYNC_RENDER表示Web组件自渲染，RenderMode.SYNC_RENDER表示支持Web组件统一渲染能力，默认值RenderMode.ASYNC_RENDER, 该模式不支持动态调整。
incognitoMode11+	boolean	否	表示当前创建的webview是否是隐私模式。true表示创建隐私模式的webview, false表示创建正常模式的webview。默认值：false
sharedRenderProcessToken12+	string	否	表示当前Web组件指定共享渲染进程的token, 多渲染进程模式下，相同token的Web组件会优先尝试复用与token相绑定的渲染进程。token与渲染进程的绑定发生在渲染进程的初始化阶段。当渲染进程没有关联的Web组件时，其与token绑定关系将被移除。默认值： ""

web组件加载网页的几种方式

1. 加载本地资源

通过$rawfile方式加载。

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      // 通过$rawfile加载本地资源文件。
      Web({ src: $rawfile("index.html"), controller: this.controller })
    }
  }
}

2. 通过resources协议加载，适用Webview加载带有"#"路由的链接。

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      // 通过resource协议加载本地资源文件。
      Web({ src: "resource://rawfile/index.html", controller: this.controller })
    }
  }
}

3. 加载沙箱路径下的本地资源文件。

1. 要获取到沙箱的路径
2. 通过这个路径进行web的加载

1.  @Entry
1.  @Component
1.  struct WebComponent {
1.  controller: webview.WebviewController = new webview.WebviewController();
1.
1.  build() {
1.  Column() {
1.  // 加载沙箱路径文件。
1.  Web({ src: url, controller: this.controller })
1.  }
1.  }
1.  }

1.  let url = 'file://' +XXXX + '/index.html';// 沙箱路径