鸿蒙Next中如何打开网页

在鸿蒙Next系统中，如何通过浏览器或其他方式打开网页？有没有具体的操作步骤或需要注意的设置？

2 回复

鸿蒙Next里打开网页？简单！用Web组件就行，像这样：

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

记得先在module.json5里声明网络权限哦！不然网页只能对着你“404 Not Found”了～

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


在鸿蒙Next（HarmonyOS NEXT）中，可以通过以下方式打开网页：

  1. 使用Web组件：
    Web组件是鸿蒙提供的网页加载控件，可以直接嵌入应用界面中显示网页内容。

    // 示例代码（ArkTS）
import webview from '[@ohos](/user/ohos).web.webview';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct WebPage {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({
        src: 'https://example.com', // 替换为目标网址
        controller: this.controller
      })
      .width('100%')
      .height('100%')
    }
  }
}

  2. 通过系统能力调用浏览器：
    使用startAbility调起系统默认浏览器应用打开网页：

    import common from '[@ohos](/user/ohos).app.ability.common';
import Want from '[@ohos](/user/ohos).app.ability.Want';

let context = ... // 获取UIAbility上下文
let want: Want = {
  action: 'ohos.want.action.viewData',
  entities: ['entity.system.browsable'],
  uri: 'https://example.com' // 替换为目标网址
};
context.startAbility(want).catch((err) => {
  console.error(`打开网页失败: ${err.code}`);
});

注意事项：

  • 使用Web组件需在module.json5中声明ohos.permission.INTERNET网络权限。
  • 调用浏览器需确保设备已安装浏览器应用。
  • 鸿蒙Next基于ArkTS开发，注意API兼容性。

根据需求选择嵌入页面或跳转浏览器即可实现打开网页功能。

回到顶部