现在很多APP里都内置了Web页面(比如社交APP、新闻浏览类APP),即从APP中跳转到网络Web页面或本地Web页面，这种方法便于扩展APP应用体验和更新维护内置Web页面。在HarmonyOS中，开发者可以通过WebView组件实现上述功能。
WebView组件可用于加载网页内容、获取页面详细信息和控制页面跳转，并实现APP应用与内置Web页面间的交互和通信。
本期Codelab我们将用一个Demo来详细介绍WebView组件的使用，包括UI界面的创建、WebView组件创建、Web页面加载方式、APP应用与Web页面间的交互与通信四个方面内容。
在开始敲代码之前，开发者们需要先下载安装Huawei DevEco Studio，可参照官网的指南进行操作：
·Huawei DevEco Studio安装指南：
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/software_install-0000001053582415
接下来我们来解析本次Demo的代码结构，方便大家做一个初步的了解：
![移动端最常用&最重要组件之一：WebView（HarmonyOS版）使用指南]( "移动端最常用&最重要组件之一：WebView（HarmonyOS版）使用指南")
● MainAbilitySlice文件
“MainAbilitySlice”文件在slice文件夹中，主要用于实现Demo逻辑，包括获取WebView对象，加载页面和实现Web页面间的通信及交互。
● DataAbility文件
“DataAbility”文件主要是通过DataAbility访问WebView加载的本地文件。
● background_button.xml文件
“background_button.xml”文件在graphic文件夹中，主要用于实现Demo中按钮的背景设置。
● ability_main.xml文件
“ability_main.xml”文件在layout文件夹中，主要实现WebView组件的创建，同时也进行诸如文本输入框和按钮等其他UI界面内容的创建。
● text.html文件
“text.html”文件在rawfile文件夹中，是新增本地Web页面的HTML文件，用于模拟WebView需要加载的本地Web页面。
● config.json文件
config.json文件是工程相关配置文件，这里主要用于添加WebView加载Web页面所需的网络权限申请和DataAbility的声明。
了解完基本的代码结构，我们正式进入WebView组件的使用。
UI页面的创建
我们先来创建一个UI界面（如图1 Demo的UI界面），该界面将包含：
◆ TextField组件，用于接收用户输入的网址信息，本Demo中默认网址为
https://www.huawei.com/cn/；
◆ WebView组件，本Demo的重点组件，我们将在“WebView组件创建”中详细描述；
◆ Button组件，即按钮组件，本次Demo主界面中涉及5个按钮组件将实现以下功能：加载Web页面（Load URL）、Web网页向后预览(Go Back)、向前浏览（GO Forward）、加载本地HTML页面（Load Local HTML）和给本地网页发信息（Send Message to Local HTML）。
![移动端最常用&最重要组件之一：WebView（HarmonyOS版）使用指南]( "移动端最常用&最重要组件之一：WebView（HarmonyOS版）使用指南")
WebView组件创建
WebView派生于通用组件Component，包含基本组件的所有功能，可以像普通组件一样使用。也就是说，WebView组件同样可以采用XML形式和代码形式创建，本次Demo使用的是XML形式：
1. 在"ability_main.xml"文件中创建WebView，示例代码如下：
2.在"slice/MainAbilitySlice.java"文件中通过如下方式获取WebView对象，示例代码如下：
WebView webview = (WebView)
findComponentById(ResourceTable.Id_webview);
当然，开发者也可以使用代码形式创建，详情请参考官网：
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-webview-0000001092715158
Web页面加载
WebView如何加载网络Web页面和本地Web页面呢？接下来我们将分别进行介绍。
1 WebView加载网络Web页面
加载网络Web页面需要申请网络权限ohos.permission.INTERNET。
我们在config.json中添加如下代码进行申请：
module": {
……
"reqPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
}
完成网络申请后，在"MainAbilitySlice.java"文件中通过webview.load(String url)方法访问具体的网络Web页面，通过WebConfig类对WebView组件进行配置，示例代码如下：
WebConfig webConfig = webview.getWebConfig();
// WebView加载URL，其中urlTextField为输入URL的TextField组件
webview.load(urlTextField.getText());
在Web页面进行链接跳转时，WebView默认会打开目标网址，通过WebAgent对象可以捕获该行为，这里仅使用isNeedLoadUrl根据当前WebView请求检查是否加载请求，当URL以"http:"或"https:"开头，则执行加载，示例代码如下：
webview.setWebAgent(new WebAgent() {
@Override
public boolean isNeedLoadUrl(WebView webView, ResourceRequest request) {
if (request == null || request.getRequestUrl() == null) {
LogUtil.info(TAG,"WebAgent isNeedLoadUrl:request is null.");
return false;
}
String url = request.getRequestUrl().toString();
if (url.startsWith("http:") || url.startsWith("https:")) {
webView.load(url);
return false;
} else {
return super.isNeedLoadUrl(webView, request);
}
}
});
除此之外，WebAgent对象还提供了相关的回调函数以观测页面状态的变更，如onLoadingPage、onPageLoaded、onError等方法，用于页面“开始加载”、“停止加载”、“加载错误”时的调用，详情可见官网WebAgent参考。
·官网：WebAgent参考
https://developer.harmonyos.com/cn/docs/documentation/doc-references/webagent-0000001078160526
同时，WebView提供Navigator类进行历史记录的浏览和处理，开发者可通过getNavigator()方法获取该类的对象，使用canGoBack()或canGoForward()方法检查是否可以向后或向前浏览，使用goBack()或goForward()方法实现向后或向前浏览，示例代码如下：
Navigator navigator = webView.getNavigator();
if (navigator.canGoBack()) {
navigator.goBack();
}
if (navigator.canGoForward()) {
navigator.goForward();
}
2 WebView加载本地Web页面
出于安全考虑，WebView不支持直接通过File协议加载资源文件或本地文件。如开发者需实现相关业务，HarmonyOS提供两种方式：通过proce***esourceRequest方法访问文件和通过Data Ability访问文件。
在本Demo中，我们将重点讲述Data Ability访问文件的形式，大家可以通过官网了解proce***esourceRequest方法的实现~
·官网：加载资源文件或本地文件
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-webview-0000001092715158
本次Demo中，我们将自行创建一个HTML文件，放在"resources/rawfile/"目录下并将其命名为text.html。除了HTML文件常见的固定内容，我们还将在其中加入
原文链接：https://harmonyos.51cto.com/posts/4426#bkwz
想了解更多关于鸿蒙的内容，请访问：
51CTO和华为官方战略合作共建的鸿蒙技术社区
https://harmonyos.51cto.com/#bkwz
