【鸿蒙生态共建】一文讲清使用Web组件加载网页的三种方法-《精通HarmonyOS NEXT ：鸿蒙App开发入门与项目化实战》读者福利

在移动互联网的时代，网页是信息的重要载体，大部分公开的信息均是以网页来承载的。因为网页的内容生成、内容的展现及交互是基于标准实现的，故在App中以网页的形式加载内容具备较好的扩展性和兼容性，内容的更新具备较好的灵活性及时效性。

鸿蒙系统提供了ArkWeb组件（本章以Web组件代指ArkWeb组件），用于在应用程序中显示网页内容，为开发者提供网页加载、交互、通信等能力。本章围绕Web组件的使用展开。

本篇内容是《精通HarmonyOS NEXT ：鸿蒙App开发入门与项目化实战》这本书第11章内容和《搜索架构之道：App中的搜索系统设计与优化实践》这本书第5章内容的延续，是咱这本书读者的福利，内容以Web组件的使用为主体，重点介绍通过Web组件加载远端网页、本地网页和本南HTML格式的数据。

对本书感兴趣的同学可以点击以下链接进行购买，及参加我的班级（华为官方）共同学习

编辑

往期福利：

1.网络权限配置

因Web组件加载远端网页（存在其它设备中的网页），需要配置ohos.permission.INTERNET网络访问权限。否则的话，远端网页将无法加载。主要分两步

1.1 在module.json5配置文件的requestPermissions标签中通过声明来设置网络权限。

// entry/src/main/module.json5

{

"module": {

//...

// 权限请求

"requestPermissions":[

{

"name" : "ohos.permission.INTERNET",

"reason": "$string:use_net_reason",

"usedScene": {

"abilities": [

"EntryAbility"

"when":"inuse"

}

]

}

1.2 在string.json文件中增加use_net_reason字串定义，在申请网络权限时该字串为作原因说明被使用。

// entry/src/main/resources/base/element/string.json

{

"name": "use_net_reason",

"value": "webview加载服务端网页"

}

2.加载远端网页

开发者可以在创建Web组件时，可指定默认加载的网页。在默认网页加载完成后，如果开发者需要变更此Web组件显示的远端网页，可以通过调用loadUrl接口加载指定的远端网页，loadUrl接口的参数是远端网页的URL。

在下面的示例中，实现当用户点击远端网页的按钮时，通过Web组件的loadUrl接口加载developer.huawei.com 网页。

Button('远端网页')

.onClick(() => {

try {

// 点击按钮时，通过loadUrl，加载developer.huawei.com

this.webviewController.loadUrl('developer.huawei.com');

} catch (error) {

let e: business_error.BusinessError = error as business_error.BusinessError;

console.error(ErrorCode: ${e.code}, Message: ${e.message});

}

})

运行之后效果如下。

编辑

3.加载本地网页

本地的网页，常用于App的关于页面、用户手册页面中，通过加载本地网页文件向用户展现App相关的内容。加载本地网页可使用Web组件的loadUrl接口，这时传入的参数类型为Resouce。

下面的示例中展示加载本地网页文件的方法，主要分为三步，

3.1 新建本地网页

右击模块的rawfile目录，单击 New -> File，之后输入文件名local.html，在项目工程的entry/src/main/resources/rawfile目录中，创建local.html文件。

编辑

3.2 编写本地网页内容

local.html文件内容如下，在该网页中展示Hello World。

Hello World

3.3 增加对local.html文件的调用

在Index.ets文件中，增加对local.html文件的调用。

Button('本地网页')

.onClick(() => {

try {

// 点击按钮时，通过loadUrl，加载local.html

this.webviewController.loadUrl($rawfile("local.html"));

} catch (error) {

let e: business_error.BusinessError = error as business_error.BusinessError;

console.error(ErrorCode: ${e.code}, Message: ${e.message});

}

})

编译示例工程运行示例App之后，点击本地网页按钮，Web组件加载展示local.html，效果如下所示

编辑

3. 加载HTML格式的数据

当开发者不需要加载整个网页，只需要显示一些网页片段时，可通过Web组件的loadData()接口实现加载HTML格式的文本数据。在Index.ets文件中增加以下代码。

Button('HTMLData')

.onClick(() => {

try {

// 点击按钮时，通过loadData，加载HTML格式的文本数据

this.webviewController.loadData(

"<body bgcolor="yellow">", // htmldata

"text/html",

"UTF-8"

);

} catch (error) {

let e: business_error.BusinessError = error as business_error.BusinessError;

console.error(ErrorCode: ${e.code}, Message: ${e.message});

}

})

编译示例工程运行示例App，之后点击HTMLData按钮，加载<body bgcolor="yellow">，网页的背景色变为黄色，效果如下所示。

转存失败，建议直接上传图片文件编辑

总结：

本文介绍了鸿蒙系统ArkWeb组件的使用方法，重点讲解如何加载远端网页、本地网页和HTML格式数据。通过配置网络权限、调用loadUrl接口实现网页加载，并展示具体代码示例。文章还演示了创建本地HTML文件和加载HTML片段的方法，帮助开发者灵活使用Web组件展示不同来源的内容。