在移动互联网的时代，网页是信息的重要载体，大部分公开的信息均是以网页来承载的。因为网页的内容生成、内容的展现及交互是基于标准实现的，故在App中以网页的形式加载内容具备较好的扩展性和兼容性，内容的更新具备较好的灵活性及时效性。
鸿蒙环境提供了ArkWeb组件（本章以Web组件代指ArkWeb组件），用于在应用程序中显示网页内容，为开发者提供网页加载、交互、通信等能力。本章围绕Web组件的启用展开。
咱这本书读者的福利，内容以Web组件的使用为主体，重点介绍通过Web组件加载远端网页、本地网页和本南HTML格式的数据。就是本篇内容是《精通HarmonyOS NEXT ：鸿蒙App开发入门与项目化实战》这本书第11章内容和《搜索架构之道：App中的搜索系统设计与优化实践》这本书第5章内容的延续，
先打个广告，对本书感兴趣的同学可以点击以下链接进行购买，或者了解我的班级参加 班级共同学习，点击链接可进入（华为官方活动）
往期福利：
- 【页面路由导航】三步实现页面跳转的完整示例-《精通HarmonyOS NEXT ：鸿蒙App开发入门与项目化实战》读者福利
- 【鸿蒙生态共建】一文10个示例讲懂鸿蒙系统ArkTS中的null与undefined的区别与应用-《精通HarmonyOS NEXT ：鸿蒙App开发入门与方案化实战》读者福利
- 【鸿蒙生态共建】一文两表三实例讲清async函数与普通函数的区别-《精通HarmonyOS NEXT ：鸿蒙App开发入门与方案化实战》读者福利
- 【鸿蒙生态共建】一文说清基础类型素材的非预期输入转换与兜底-《精通HarmonyOS NEXT ：鸿蒙App开发入门与任务化实战》读者福利
- 【鸿蒙生态共建】一文说明兼容版本、目标版本和编译版本的区别与应用实践-《精通HarmonyOS NEXT ：鸿蒙App开发入门与项目化实战》读者福利
- 【鸿蒙生态共建】一文说清复杂类型数据的非预期输入转换与兜底-《精通HarmonyOS NEXT ：鸿蒙App开发入门与任务化实战》读者福利
- 【鸿蒙生态共建】鸿蒙6适配-API变化与兼容(1.基础能力篇)-《精通HarmonyOS NEXT ：鸿蒙App开发入门与项目化实战》读者福利
- 【鸿蒙生态共建】一文讲清如何实现对开发版及发布版分别单独配置签名证书-《精通HarmonyOS NEXT ：鸿蒙App构建入门与项目化实战》读者福利
- 【鸿蒙生态共建】鸿蒙6适配-API变化与兼容(2.UI交互与基础能力篇)--《精通HarmonyOS NEXT ：鸿蒙App研发入门与项目化实战》读者福利
- 【鸿蒙生态共建】鸿蒙6适配-API变更与兼容(3.UI交互能力篇)-《精通HarmonyOS NEXT ：鸿蒙App开发入门与项目化实战》读者福利
- 【鸿蒙生态共建】一文讲清从注册到发布共享库至openharmony三方库中心仓（Module化及复用）-《精通HarmonyOS NEXT ：鸿蒙App制作入门与项目化实战》读者福利
- 【鸿蒙生态共建】一文讲清发布共享库至openharmony三方库中心仓时Module的配置-《精通HarmonyOS NEXT ：鸿蒙App开发入门与任务化实战》读者福利
- 【鸿蒙生态共建】一文讲清如何复用openharmony三方库中心仓中的共享库-《精通HarmonyOS NEXT ：鸿蒙App开发入门与项目化实战》读者福利
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。
<!-- local.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Hello World</p>
</body>
</html>
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(
"<html><body bgcolor=\"yellow\"></body></html>",// 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按钮，加载<html><body bgcolor=\"yellow\"></body></html>，网页的背景色变为黄色，效果如下所示。
总结：
本文介绍了鸿蒙系统ArkWeb组件的使用方式，重点讲解如何加载远端网页、本地网页和HTML格式数据。通过配置网络权限、调用loadUrl接口实现网页加载，并展示具体代码示例。文章还演示了创建本地HTML材料和加载HTML片段的方法，帮助开发者灵活运用Web组件展示不同来源的内容。
浙公网安备 33010602011771号