HarmonyOS编程开发实战：Web组件加载网页的几种方式示例_鸿蒙webview加载沙箱中的页面-优快云博客

本文链接：https://blog.youkuaiyun.com/DMZDAMS/article/details/140528889

1. Web组件简介

在应用界面里嵌入网页是很多快速APP开发使用的方式之一，通过这种方式可以比较好的达到多端兼容的效果，鸿蒙也一样提供了类似的能力，就是基础组件中的Web组件。当然，单纯的靠Web组件也无法实现复杂的功能，还需要对应的控制器WebviewController，两者配合可以达到最佳的控制和显示效果。

2. Web组件及控制器常用方法

web组件及其控制器位于web_webview模块下，使用如下的方式导入：

import web_webview from '@ohos.web.webview';

web_webview模块包括了众多的操作方法，就本文而言，重点需要掌握的是如下三个：

Web组件方法

1）Web(options: { src: ResourceStr, controller: WebviewController | WebController})

创建Web组件实例，其中src是网页资源地址，controller是组件控制器，从API Version 9开始，建议使用WebviewController作为控制器。

WebviewController方法

2）loadUrl(url: string | Resource, headers?: Array<WebHeader>): void

加载指定的url，headers为可选的请求头。

3）loadData(data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string): void

加载指定的数据。

3. Web组件加载网页示例

本示例演示加载网页的四种方式，默认是加载资源文件，运行后的初始界面如下所示：

下面详细介绍创建该应用的步骤。

步骤1：创建Empty Ability项目。

步骤2：在module.json5配置文件加上对权限的声明：

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

这里添加了获取互联网信息的权限。

步骤3：在Index.ets文件里添加如下的代码：

import http from '@ohos.net.http';
import util from '@ohos.util';
import fs from '@ohos.file.fs';
import picker from '@ohos.file.picker';
import systemDateTime from '@ohos.systemDateTime';
import request from '@ohos.request';
import connection from '@ohos.net.connection';
import HashSet from '@ohos.util.HashSet';
import ArrayList from '@ohos.util.ArrayList';
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct Index {
  //要加载的网址
  @State webUrl: string = "https://www.baidu.com"
  //要加载的文件
  @State loadFileUri: string = ""
  //要加载的内容
  @State webContent: string = `<!DOCTYPE html>
<html>
<body style="font-size: large;text-align: center;">
  <div>测试加载文本内容!</div>
</body>
</html>`
  scroller: Scroller = new Scroller()
  contentScroller: Scroller = new Scroller()
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Row() {
      Column() {
        Text("Web加载示例")
          .fontSize(14)
          .fontWeight(FontWeight.Bold)
          .width('100%')
          .text