ArkWeb简介

最新推荐文章于 2024-09-11 13:49:11 发布

煸橙干儿~~

最新推荐文章于 2024-09-11 13:49:11 发布

阅读量795

点赞数 19

分类专栏： HarmonyOS 文章标签： harmonyos

本文链接：https://blog.csdn.net/sinat_34896766/article/details/141217605

版权

HarmonyOS 专栏收录该内容

81 篇文章 1 订阅

订阅专栏

一、什么是ArkWeb

Web组件用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。可以用于实现移动端的混合式开发（Hybrid App）。

页面加载：Web组件提供基础的前端页面加载的能力，包括加载网络页面、本地页面、HTML格式文本数据。

页面交互：Web组件提供丰富的页面交互的方式，包括设置前端页面深色模式、新窗口中加载页面、位置权限管理、Cookie管理、应用侧使用前端页面JavaScript等能力。

页面调试：Web组件支持使用Devtools工具调试前端页面。

二、ArkWeb API参考

ArkWeb涉及到的API主要有Web组件、Webview。

1、Web组件

提供具有网页显示能力的一种组件。

Web(options: {src: ResourceStr, controller: webviewController |WebviewController, renderMode? : RenderMode, incognitoMode? :boolean })

2、Webview

提供文本控制能力的相关接口。例如控制Web组件加载的内容，控制Web内容后退前进，以及异步执行JavaScript的能力。

三、ArkWeb页面加载与使用

1、加载网络页面

开发者可以在Web组件创建时，指定默认加载的网络页面。在默认页面加载完成后，如果开发者需要变更此Web组件显示的网络页面，可以通过调用loadUrl()接口加载指定网页。

import { webview } from '@kit.ArkWeb'

@Component
struct Index {
  webviewController: webview.WebviewController = new webview.WebviewController()
  build() {
    Column() {
      Button('loaurl')
        .onClick(() => {
          try {
          //   点击按钮时，通过loadurl，跳转页面www.example1.com
            this.webviewController.loadUrl('www.example1.com')
          } catch(err) {
            console.log(err)
          }
        })
      // 组件创建时，加载www.example.com
      Web({src: 'www.example.com',controller: this.webviewController})
    }
  }
}

2、加载本地页面

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

import { webview } from '@kit.ArkWeb'

@Component
struct Index {
  webviewController: webview.WebviewController = new webview.WebviewController()
  build() {
    Column() {
      Button('loaurl')
        .onClick(() => {
          try {
          //   点击按钮时，通过loadurl，跳转页面local1.html
            this.webviewController.loadUrl($rawfile('local1.html'))
          } catch(err) {
            console.log(err)
          }
        })
      // 组件创建时，加载local.html
      Web({src: $rawfile('local.html'),controller: this.webviewController})
    }
  }
}

3、加载HTML格式数据

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

import { webview } from '@kit.ArkWeb'

@Entry
@Component
struct WebComponent {
  webviewController: webview.WebviewController = new webview.WebviewController()
  build() {
    Column() {
      Button('loaurl')
        .onClick(() => {
          this.webviewController.loadData(
            "<html><body>Source:<pre>source</pre></body></html>",
            "text/html",
            "UTF-8"
          )
        })
      // 组件创建时，加载www.example.com
      Web({src: 'www.baidu.com',controller: this.webviewController})
    }
  }
}