HarmonyOS 鸿蒙Next中怎么加载网页？

HarmonyOS 鸿蒙Next中怎么加载网页？ HarmonyOS怎么加载网页？

7 回复 
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadUrl，跳转到www.example1.com
            this.controller.loadUrl('www.example1.com');
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

参考地址

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

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


非常简单，只需要使用webview组件就行了：

加载在线网页：

// xxx.ets
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

加载本地网页：通过$rawfile方式加载。

// xxx.ets
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  build() {
    Column() {
      // 通过$rawfile加载本地资源文件。
      Web({ src: $rawfile("index.html"), controller: this.controller })
    }
  }
}

加载沙箱路径下的本地资源文件，需要开启应用中文件系统的访问fileAccess权限。

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { GlobalContext } from '../GlobalContext';
let url = 'file://X/X/X/X/X/index.html';
@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  build() {
    Column() {
      // 加载沙箱路径文件。
      Web({ src: url, controller: this.controller })
      .fileAccess(true)
    }
  }
}

参考代码：

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

@Entry
@Component
struct WebPage {
  // 创建Web控制器
  controller: webview.WebviewController = new webview.WebviewController();
  // 获取Ability上下文
  context: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;

  build() {
    Column() {
      // Web组件加载百度
      Web({
        src: 'https://www.baidu.com',
        controller: this.controller
      })
      .width('100%')
      .height('100%')
      .javaScriptAccess(true)     // 允许执行JS脚本
      .fileAccess(true)           // 允许文件访问
      .zoomAccess(true)           // 允许手势缩放
    }
    .width('100%')
    .height('100%')
  }
}

可以使用在官方Api中的 @ohos.web.webview

1、自定义一个WebViewPage页面

import webView from '[@ohos](/user/ohos).web.webview'
import { router } from '@kit.ArkUI';
import { StandardTitleBar } from '../views/StandardTitleBar';

/**
 * @author J.query
 * @date 2024/12/4 11:32
 * @email j-query@foxmail.com
 * Description:
 */
@Entry
@Component
struct WebViewPage {
  @State  url:string = "";
  @State title:string|undefined = "";

  controller: webView.WebviewController = new webView.WebviewController()

  aboutToAppear(): void {
    let  params = router.getParams() as Record<string,Object>
    this.url=params["url"] as string;
    console.info("传递过来的url："+this.url)
  }

  build() {
    Column() {

      StandardTitleBar({
        title: this.title,
        onBack: () => {
          router.back();
        }
      })
      Web({ src: this.url, controller: this.controller })
        .javaScriptAccess(true)
        .onTitleReceive((event) => {
          this.title = event?.title;
        }).layoutWeight(1)

    }.justifyContent(FlexAlign.Start)
  }
}

2、使用方法：

.onClick(() => {
  let url = "https://www.baidu.com/";
  router.pushUrl({
    url: 'pages/WebViewPage',
    params: {
      data1: 'message',
      url: url  // 传递的 URL 参数
    }
  }, router.RouterMode.Single)
})

效果：

cke_5604.jpeg

使用系统提供的web组件，具体可以查看官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-component-overview?ha_source=sousuo&ha_sourceId=89000251

在HarmonyOS Next中，使用Web组件加载网页。在ArkTS的UI代码中引入Web组件，通过src属性指定要加载的网页URL。例如：Web({ src: 'https://www.example.com' })。该组件基于系统内置的WebKit内核，支持基本的网页渲染与交互。

在HarmonyOS Next中，加载网页主要通过Web组件实现。以下是核心方法：

1. 基本使用 在ArkTS UI的build()方法中直接声明Web组件，并设置其src属性为要加载的网页地址。

import webview from '@ohos.web.webview';

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

  build() {
    Column() {
      // 加载指定URL
      Web({ src: 'https://developer.harmonyos.com/', controller: this.controller })
        .width('100%')
        .height('100%')
    }
  }
}

2. 关键能力配置

  • 启用JavaScript：默认支持，可通过.javaScriptAccess(true)显式开启。
  • 文件访问：使用file://协议加载本地HTML文件，需配置@ohos.permission.FILE_ACCESS权限。
  • 控制与交互：通过WebviewController实现页面导航（前进/后退）、页面重载、执行JavaScript等控制。

3. 网络与安全

  • 加载在线网页需配置ohos.permission.INTERNET网络权限。
  • 注意遵循同源策略，跨域资源访问受安全限制。

4. 扩展场景

  • 与ArkTS交互：通过WebMessagePort实现网页与应用的双向通信。
  • 自定义处理：可覆盖onPageBegin、onConfirm等回调以处理页面加载、弹窗等特定事件。

这种方式为HarmonyOS应用提供了完整的Web内容嵌入能力，适用于需混合原生与Web技术的场景。

回到顶部