HarmonyOS鸿蒙Next中使用ArkWeb构建页面

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

页面加载过程中，若涉及网络资源获取，需要配置ohos.permission.INTERNET网络访问权限。

加载网络页面

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

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

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

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

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadUrl，跳转到www.example1.com
            this.controller.loadUrl('www.example1.com');
          } catch (error) {
            let e: BusinessError = error as BusinessError;
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
          }
        })
      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.controller})
    }
  }
}

加载本地页面

将本地页面文件放在应用的rawfile目录下，开发者可以在Web组件创建的时候指定默认加载的本地页面，并且加载完成后可通过调用loadUrl()接口变更当前Web组件的页面。

在下面的示例中展示加载本地页面文件的方法：

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

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

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadUrl，跳转到local1.html
            this.controller.loadUrl($rawfile("local1.html"));
          } catch (error) {
            let e: BusinessError = error as BusinessError;
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
          }
        })
      // 组件创建时，通过$rawfile加载本地文件local.html
      Web({ src: $rawfile("local.html"), controller: this.controller })
    }
  }
}

local.html页面代码。

<!-- local.html -->
<!DOCTYPE html>
<html>
  <body>
    <p>Hello World</p>
  </body>
</html>

local1.html页面代码。

<!-- local1.html -->
<!DOCTYPE html>
<html>
  <body>
    <p>This is local1 page</p>
  </body>
</html>

加载HTML格式的文本数据

Web组件可以通过loadData()接口实现加载HTML格式的文本数据。当开发者不需要加载整个页面，只需要显示一些页面片段时，可通过此功能来快速加载页面。

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

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

  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadData，加载HTML格式的文本数据
            this.controller.loadData(
              "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
              "text/html",
              "UTF-8"
            );
          } catch (error) {
            let e: BusinessError = error as BusinessError;
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
          }
        })
      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

动态创建Web组件

支持命令式创建Web组件，这种方式创建的组件不会立即挂载到组件树，即不会对用户呈现（组件状态为Hidden和InActive），开发者可以在后续使用中按需动态挂载。后台启动的Web实例不建议超过200个。

// 载体Ability
// EntryAbility.ets
import { createNWeb } from "../pages/common"
onWindowStageCreate(windowStage: window.WindowStage): void {
  windowStage.loadContent('pages/Index', (err, data) => {
    // 创建Web动态组件（需传入UIContext），loadContent之后的任意时机均可创建
    createNWeb("https://www.example.com", windowStage.getMainWindowSync().getUIContext());
    if (err.code) {
      return;
    }
  });
}

更多关于HarmonyOS鸿蒙Next中使用ArkWeb构建页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，使用ArkWeb构建页面主要涉及以下几个步骤：

  1. 环境配置：确保开发环境中已安装DevEco Studio，并且配置了HarmonyOS SDK。

  2. 创建ArkWeb组件：在项目的entry/src/main/ets/pages目录下，创建一个新的ArkWeb组件。可以通过@Component装饰器来定义组件，并使用@State和@Prop等装饰器来管理组件的状态和属性。

  3. 加载Web页面：在ArkWeb组件中，使用<web>标签来加载Web页面。可以通过src属性指定要加载的URL或本地HTML文件。

  4. 事件处理：ArkWeb组件支持多种事件，如onPageStart、onPageFinish、onError等。可以通过这些事件来处理页面加载过程中的各种情况。

  5. 与JavaScript交互：ArkWeb组件支持与JavaScript的交互。可以通过postMessage和onMessage方法来实现ArkTS与JavaScript之间的通信。

  6. 样式和布局：ArkWeb组件的样式和布局可以通过CSS或ArkTS中的样式属性来控制。可以使用flex布局或其他布局方式来调整组件的位置和大小。

  7. 调试和测试：在DevEco Studio中使用模拟器或真机进行调试和测试，确保ArkWeb组件的功能和性能符合预期。

  8. 发布和部署：完成开发和测试后，可以将应用打包并发布到AppGallery或其他应用市场。

以上步骤涵盖了在HarmonyOS鸿蒙Next中使用ArkWeb构建页面的主要流程。通过合理使用ArkWeb组件，可以在应用中嵌入Web内容，并实现与ArkTS的无缝交互。

更多关于HarmonyOS鸿蒙Next中使用ArkWeb构建页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用ArkWeb构建页面的步骤如下：

  1. 创建ArkWeb项目：在DevEco Studio中新建项目，选择“ArkWeb”模板。

  2. 配置页面：在pages目录下创建页面文件（如index.ets），并使用ArkUI框架编写页面结构。

  3. 使用Web组件：在页面中使用<web>标签嵌入Web内容，通过src属性指定URL或本地HTML文件。

  4. 处理交互：通过@onMessage监听Web页面发送的消息，使用postMessage与Web页面进行通信。

  5. 调试与运行：使用模拟器或真机调试，确保页面功能正常。

通过这些步骤，可以快速构建并集成Web页面到鸿蒙应用中。

回到顶部