HarmonyOS 鸿蒙Next中关于webview

HarmonyOS 鸿蒙Next中关于webview 通过webview 的WebviewController可以控制Web组件各种行为,包含控制web页面前进/后退、执行JavaScript代码、控制页面放大缩小等,对吗?

13 回复

WebviewController

通过WebviewController可以控制Web组件各种行为(包括页面导航、生命周期状态、JavaScript交互等行为)。一个WebviewController对象只能控制一个Web组件,且必须在Web组件和WebviewController绑定后,才能调用WebviewController上的方法(静态方法除外)。

详见开发文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-webview-webviewcontroller

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


是的,你说的没问题。

WebviewController是控制ArkWeb组件行为的核心类

页面导航: forward()/backward()/accessForward()/accessBackward()

前进、后退、判断是否可前进/后退

页面加载: loadUrl()/loadData()/refresh()/stop()

加载 URL、加载 HTML 数据、刷新、停止加载

JS交互:runJavaScript()/registerJavaScriptProxy()

执行JS代码、注入原生对象供JS调用

缩放控制: zoom()/zoomIn()/zoomOut()

控制页面放大缩小

滚动控制:scrollTo()/scrollBy()

控制页面滚动位置

可以参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-webview-webviewcontroller

里面有方法详细的使用示例, 希望有解决你的疑惑~

背景知识:

对的,但是要缩放控制是 WebviewController 的能力,前进 / 后退 / JS 执行也是它的核心能力。

1、控制前进 / 后退

controller.backward() // 后退
controller.forward()  // 前进
controller.accessStep(-1) // 是否可后退
controller.backOrForward(step) // 指定步数前进/后退

2、执行 JavaScript

// 异步执行 JS
controller.runJavaScript('alert("hello")')
// 注入对象给网页调用
controller.registerJavaScriptProxy(...)

3、控制页面放大缩小

controller.zoom(1.5)   // 缩放到 1.5 倍
controller.zoomIn()     // 放大 25%
controller.zoomOut()    // 缩小 20%

具体参考:webviewcontroller

是的,我们在鸿蒙应用开发中,通过 webview.WebviewController可以全面控制 Web 组件的各种行为,包括页面导航、执行 JavaScript 代码以及管理页面缩放等。

具体来说,WebviewController的核心控制能力主要体现在以下几个方面:

网页导航控制WebviewController提供了完整的页面导航管理功能。开发者可以通过控制器的方法实现前进、后退、刷新等基础操作。例如,在页面顶部放置导航按钮,其点击事件可以分别调用 this.webviewController.backward()、this.webviewController.forward()和this.webviewController.refresh()来实现对应的网页导航交互。

执行 JavaScript 代码这是实现 ArkTS 与 H5 页面双向交互的关键。通过控制器的 runJavaScript()方法,可以在 Web 组件中执行任意的 JavaScript 代码。这不仅可以调用 H5 页面中已定义的函数,也可以直接注入并执行代码块来动态修改页面内容。例如,通过 this.webviewController.runJavaScript(‘changeMessage(“调用h5方法成功”)’)来调用 H5 函数,或者通过传递一个完整的函数体字符串来直接改变页面元素的样式。

页面缩放管理WebviewController结合 Web 组件的属性,可以提供灵活的页面缩放控制方案,比如:

启用手势缩放:通过设置 Web 组件的 .zoomAccess(true)属性来允许用户通过手势进行缩放。

动态调整比例:可以直接调用控制器的 zoom()方法,以编程方式将页面缩放至目标比例,例如 this.controller.zoom(1.5)。

监听缩放事件:通过 Web 组件的 .onScaleChange回调,可以实时监听用户缩放操作带来的比例变化。

拦截键盘缩放:虽然暂不支持禁用 Ctrl+鼠标滚轮缩放,但可以通过 Web 组件的 .onKeyPreIme事件拦截 Ctrl+ +/-的键盘快捷键,从而禁用键盘缩放。

当然了,其他高级控制除了上述功能,WebviewController还是其他一系列 Web 高级能力的管理入口。例如,通过与之关联的 WebCookieManager管理 Cookie,通过 WebStorage操作本地存储,以及通过 javaScriptProxy注册原生对象供 H5 调用,实现更复杂的双向通信。

简单来说,和你想的一样,webview.WebviewController是鸿蒙 ArkWeb 能力的核心控制枢纽,它将网页加载、导航、交互脚本执行、视图缩放等多种控制功能封装在一起,使得开发者能够对嵌入的 Web 内容进行精准和高效的管理。

你也可以多看看相关文档,应该对你后续开发帮助很大

Class (WebviewController)-@ohos.web.webview (Webview)-ArkTS API-ArkWeb(方舟Web)-应用框架 - 华为HarmonyOS开发者

有要学HarmonyOS AI的同学吗,联系我:https://www.itying.com/goods-1206.html,

对的 没问题

对,看看直接看官方demo:

https://gitcode.com/HarmonyOS_Samples/run-js-in-web

/*
 * Copyright (c) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { webview } from '@kit.ArkWeb';
import Logger from '../model/Logger';

const TAG: string = '[Index]';

@Entry
@Component
struct Index {
  @State gameLeft: string = 'console.info(\'webgame gameLeft\'); _main.paddle.moveLeft();';
  @State gameRight: string = 'console.info(\'webgame gameRight\'); _main.paddle.moveRight();';
  @State gameStart: string =
    'console.info(\'webgame gameStart\'); if (_main.game.state !== _main.game.state_GAMEOVER) {_main.game.state = _main.game.state_RUNNING; _main.ball.fired = true;}';
  @State gameReset: string =
    'console.info(\'webgame gameReset\'); if (_main.game.state === _main.game.state_GAMEOVER) {_main.game.state = _main.game.state_START; _main.start()}';
  @State removeDesc: string =
    'console.info(\'webgame removeDesc\'); y=document.getElementsByTagName(\'div\')[0]; y.parentNode.removeChild(y)';
  private imgRequestUrl: string = 'https://yangyunhe369.github.io/h5-game-blockBreaker/images/background.jpg';
  controller: webview.WebviewController = new webview.WebviewController();
  responseweb: WebResourceResponse = new WebResourceResponse();

  build() {
    Row() {
      Column() {
        Button('Start', { type: ButtonType.Capsule })
          .onClick(() => {
            try {
              this.controller.loadUrl('javascript:' + this.gameStart);
            } catch (error) {
              Logger.info(TAG, `loadUrl gameStart fail: ${JSON.stringify(error)}`);
            }
          })
        Button('L', { type: ButtonType.Capsule })
          .width(50)
          .height(100)
          .backgroundColor(Color.Red)
          .gesture(
            LongPressGesture({ repeat: true, duration: 20 })
              .onAction((event: GestureEvent) => {
                if (event.repeat) {
                  try {
                    this.controller.loadUrl('javascript:' + this.gameLeft);
                  } catch (error) {
                    Logger.info(TAG, `loadUrl gameLeft fail: ${JSON.stringify(error)}`);
                  }
                }
              })
          )
      }
      .width('8%')

      Column() {
        Web({ src: 'https://yangyunhe369.github.io/h5-game-blockBreaker/', controller: this.controller })
          .domStorageAccess(true)
          .onlineImageAccess(true)
          .imageAccess(true)
          .zoomAccess(false)
          .javaScriptAccess(true)
          .backgroundColor(Color.Orange)
          .onInterceptRequest((event) => {
            let url = '';
            if (event) {
              url = event.request.getRequestUrl();
            }
            if (url === this.imgRequestUrl) {
              return this.responseweb;
            }
            return null;
          })
          .onPageEnd(e => {
            try {
              this.controller.loadUrl('javascript:' + this.removeDesc);
            } catch (error) {
              Logger.info(TAG, `loadUrl removeDesc fail: ${JSON.stringify(error)}`);
            }
          })
      }
      .width('78%')

      Column() {
        Button('Reset', { type: ButtonType.Capsule })
          .onClick(() => {
            try {
              this.controller.loadUrl('javascript:' + this.gameReset);
            } catch (error) {
              Logger.info(TAG, `loadUrl gameReset fail: ${JSON.stringify(error)}`);
            }
          })
        Button('R', { type: ButtonType.Capsule })
          .width(50)
          .height(100)
          .backgroundColor(Color.Red)
          .gesture(
            LongPressGesture({ repeat: true, duration: 20 })
              .onAction((event: GestureEvent) => {
                if (event.repeat) {
                  try {
                    this.controller.loadUrl('javascript:' + this.gameRight);
                  } catch (error) {
                    Logger.info(TAG, `loadUrl gameRight fail: ${JSON.stringify(error)}`);
                  }
                }
              })
          )
      }
      .width('8%')
    }
    .margin({ left: 36 })
  }
}

对的。

WebviewController 就是用于控制 Web 组件行为的控制器,一个 WebviewController 对应一个 Web 组件。

常见能力包括:

  • 页面前进、后退
  • 加载 URL 或 HTML 数据
  • 执行 JavaScript(runJavaScript
  • JS 与 ArkTS 双向通信
  • 获取和管理浏览历史
  • 页面刷新
  • 控制缩放(配合 Web 组件相关配置)
  • Cookie、消息通道等 Web 能力管理

所以你的理解基本正确:

通过 WebviewController 可以控制 Web 组件的各种行为,包括页面前进/后退、执行 JavaScript、页面缩放控制等。

不过需要注意一点:

WebviewController 必须先与对应的 Web 组件绑定后才能正常调用相关实例方法。

在移动应用开发中,通过WebviewController(或类似的WebView组件),开发者可以对嵌入的Web页面进行丰富的行为控制。

  • 导航控制:可以精确控制网页的前进、后退、刷新,以及加载指定的URL。
  • JavaScript交互:这是一个非常核心的功能。应用可以调用Web页面中的JavaScript代码,反之,Web页面也可以通过特定的接口(如JavaScript Bridge)调用应用的原生功能。这为混合应用开发提供了强大的支持。
  • 视图与布局控制:可以对Web页面进行缩放、设置缩放比例、调整显示大小,甚至可以捕获和处理Web页面的截图。
  • 页面属性与状态管理:可以获取或设置Web页面的标题、处理Cookie、管理历史记录列表等。
  • 事件监听与处理:能够监听Web页面的加载进度、加载完成、加载错误等各种关键事件,并在这些事件发生时执行相应的原生应用逻辑。WebviewController是连接原生应用和Web内容的桥梁,提供了全面的能力来管理和增强Web内容的显示与交互体验。

对的。

开发的时候我们通过WebviewController可以控制Web组件各种行为(包括页面导航、生命周期状态、JavaScript交互等行为)。一个WebviewController对象只能控制一个Web组件,且必须在Web组件和WebviewController绑定后,才能调用WebviewController上的方法(静态方法除外)

具体的可以参考一下实用操作手册:https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-webview-webviewcontroller

在HarmonyOS NEXT中,WebView组件已替换为ArkWeb。ArkWeb基于ArkTS/JS开发,不再兼容Android WebView。使用方式:通过Web组件加载URL,支持JavaScriptProxy进行双向通信,提供Cookie、缓存等管理接口。需注意权限声明和ArkTS语法规范。

是的,通过Web组件关联的WebviewController,你可以控制页面前进、后退、刷新、停止加载等导航操作。还能执行JavaScript代码(如runJavaScript),注册回调接收页面消息。此外,支持页面缩放控制(zoom、zoomIn、zoomOut),以及清除缓存和历史记录等。它也用于监听页面加载状态、标题、进度等事件。

回到顶部