鸿蒙Next中this.controller.loadurl()方法如何使用

在鸿蒙Next开发中，调用this.controller.loadurl()方法时遇到了问题。具体场景是：我在Web组件中尝试通过this.controller.loadurl(“https://example.com”)加载网页，但页面没有反应，也没有报错信息。请问这个方法是否需要提前初始化controller？正确的参数格式是什么？是否需要在config.json中配置特殊权限？有没有完整的代码示例可以参考？

2 回复

在鸿蒙Next中，this.controller.loadUrl() 就像给Web组件点外卖：this.controller.loadUrl("https://example.com")。记得先给Web组件配好controller，不然它会饿肚子报错哦！简单说就是：先绑controller，再点loadUrl送餐~

更多关于鸿蒙Next中this.controller.loadurl()方法如何使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，this.controller.loadUrl() 方法用于在 Web 组件中加载指定的 URL。以下是详细使用步骤和示例代码：

使用步骤：

  1. 创建 Web 组件控制器：在组件中声明 WebviewController 对象。
  2. 绑定控制器：将控制器与 Web 组件关联。
  3. 调用 loadUrl()：通过控制器加载目标 URL。

示例代码：

import webview from '@ohos.web.webview';
import { webviewController } from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  // 1. 声明 Web 组件控制器
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      // 2. 绑定控制器到 Web 组件
      Web({
        src: '', // 初始 URL 可为空
        controller: this.controller
      })
        .width('100%')
        .height('100%')
    }
    .width('100%')
    .height('100%')
    .onClick(() => {
      // 3. 点击事件中调用 loadUrl 加载网页
      this.controller.loadUrl('https://example.com');
    })
  }
}

注意事项：

  • URL 格式：需确保 URL 合法（例如以 http:// 或 https:// 开头）。
  • 网络权限：在 module.json5 中添加网络权限：
    "requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]
  • 错误处理：可通过 onError 监听加载失败事件。

替代方式：

若需初始化时直接加载 URL，可在 src 属性中直接指定：

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

以上代码适用于 HarmonyOS NEXT 的 ArkTS 声明式开发范式。

回到顶部