HarmonyOS 鸿蒙Next中给web组件设置url

HarmonyOS 鸿蒙Next中给web组件设置url

我的代码：

Web({
  src: this.url,
  controller: this.webviewController
})

第一次给this.url赋值的时候，web会正常加载网页。

然后再次给this.url赋新值的时候就不会加载新的网页了？

只能用一次？

10 回复

要通过loadUrl()重新加载。如：

this.webviewController.loadUrl('https://developer.huawei.com/');

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


可以修改this.url，改动了过后需要调动一下刷新

this.url = '更改后网址'
this.webController.refresh() //调用一下刷新

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

第一只赋值为啥不需要refresh ？

标题

文本内容

子标题

更多文本内容

楼主使用loadUrl()方法加载新URL

// 修改URL时调用以下代码
this.webviewController.loadUrl(newUrl);

完整示例

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebExample {
  @State url: string = 'https://first-load.com';
  webviewController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('切换页面')
        .onClick(() => {
          this.url = 'https://new-page.com';
          this.webviewController.loadUrl(this.url);
        })
      Web({
        src: this.url, // 仅初始化生效
        controller: this.webviewController
      })
    }
  }
}

希望HarmonyOS能继续优化系统稳定性，减少崩溃和重启的情况。

为啥修改this.url 不好使了呢？ 只能用一次？

Button('切换页面')
  .onClick(() => {
    try {
      this.controller.loadUrl('https://www.newpage.com');
    } catch (error) {
      console.error(`Error: ${error.code}, Message: ${error.message}`);
    }
  })

文档地址

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-page-loading-with-web-components

在HarmonyOS Next中，使用Web组件加载URL需通过loadUrl()方法实现。首先创建Web组件实例，然后调用该方法传入目标URL字符串。示例代码：

// 创建Web组件
let webview: web.Webview = new web.Webview()
// 加载URL
webview.loadUrl("https://example.com")

注意需在module.json5中声明ohos.permission.INTERNET网络权限。URL需包含协议头（如https://），否则会加载失败。Web组件支持http/https协议，不支持file协议直接访问本地文件。

在HarmonyOS Next中，Web组件的URL动态更新需要通过Controller来重新加载。你的代码只设置了初始URL，后续直接修改this.url不会触发重新加载。正确做法是：

  1. 在修改this.url后，调用webviewController的loadUrl方法：
this.url = "新URL";
this.webviewController.loadUrl(this.url);
  1. 或者使用状态管理(@State)装饰器自动触发更新：
[@State](/user/State) url: string = "初始URL";

// 修改时直接赋值即可
this.url = "新URL";

Web组件在HarmonyOS中不会自动监听url变量的变化，必须通过Controller主动触发加载或使用状态管理装饰器。这是设计上的行为，不是只能使用一次。

回到顶部