鸿蒙中如何使用 WebView 显示 Web 内容？

你是不是也在想——“鸿蒙这么火，我能不能学会？” 答案是：当然可以！ 这个专栏专为零基础小白设计，不需要编程基础，也不需要懂原理、背术语。我们会用最通俗易懂的语言、最贴近生活的案例，手把手带你从安装开发工具开始，一步步学会开发自己的鸿蒙应用。 不管你是学生、上班族、打算转行，还是单纯对技术感兴趣，只要你愿意花一点时间，就能在这里搞懂鸿蒙开发，并做出属于自己的App！ 📌 关注本专栏《零基础学鸿蒙开发》，一起变强！ 每一节内容我都会持续更新，配图+代码+解释全都有，欢迎点个关注，不走丢，我是小白酷爱学习，我们一起上路 🚀

全文目录：

• • 概述：WebView 的使用场景
  • 加载 Web 页面：在鸿蒙中嵌入 Web 页面
  • • 步骤 1：在布局文件中添加 WebView 控件
    • 步骤 2：在代码中加载 Web 页面
    • 步骤 3：配置 WebView 设置（可选）
  • 与 Web 内容交互：通过 JavaScriptBridge 与 Web 页面交互
  • • 步骤 1：通过 JavaScriptBridge 调用 JavaScript 函数
    • 步骤 2：在 Web 页面中调用本地方法
    • 步骤 3：接收 Web 页面的回调
  • 代码示例：使用 WebView 加载和显示 Web 内容
  • • 在 Web 页面中：
  • 小结

概述：WebView 的使用场景

WebView 是一种可以在应用中嵌入并显示 Web 页面的控件。通过 WebView，开发者可以将 HTML、CSS、JavaScript 编写的 Web 内容直接集成到原生应用中，而无需切换到外部浏览器。WebView 在许多应用中都有广泛的应用场景，尤其是在以下几个方面：

• 显示动态内容：如果你的应用需要动态展示 Web 页面或集成 Web 服务（如显示新闻、博客、在线商店等），WebView 是一个理想的选择。
• 加载 HTML 内容：对于需要显示 HTML 格式的内容（如帮助文档、用户协议等），可以通过 WebView 轻松加载和显示。
• 与 Web 页面交互：WebView 可以通过 JavaScript 与 Web 页面交互，甚至调用 JavaScript 函数进行数据传输和操作。

在鸿蒙系统中，WebView 是实现这些功能的核心控件，它提供了高效的 Web 内容渲染，并且可以与 Web 页面进行灵活的交互。本文将介绍如何在鸿蒙中使用 WebView 加载和显示 Web 内容，并通过 JavaScriptBridge 与 Web 页面交互。

加载 Web 页面：在鸿蒙中嵌入 Web 页面

WebView 可以通过简单的设置来加载 Web 内容。开发者可以在鸿蒙应用中嵌入 Web 页面，并为其提供必要的配置和功能。

步骤 1：在布局文件中添加 WebView 控件

首先，我们需要在布局文件中添加一个 WebView 控件，用于显示 Web 页面内容。可以将 WebView 放入任何布局容器中，下面是一个简单的例子：

<LinearLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:orientation="vertical"
ohos:width="match_parent"
ohos:height="match_parent">

<WebView
ohos:id="$+id:webview"
ohos:width="match_parent"
ohos:height="match_parent" />
</LinearLayout>

在这个布局中，我们定义了一个占满整个屏幕的 WebView，该控件会用于展示 Web 页面内容。

步骤 2：在代码中加载 Web 页面

接下来，我们可以在 Activity 或 Ability 中获取 WebView 控件的实例，并使用 loadUrl() 方法加载 Web 页面。以下是一个简单的示例，展示如何加载一个 Web 页面：

import ohos.app.Context;
import ohos.agp.components.WebView;

public class WebViewExample {
private WebView webView;

public WebViewExample(Context context) {
webView = new WebView(context);
}

public void loadWebPage() {
// 加载 Web 页面
webView.loadUrl("https://www.example.com");
}
}

在上面的代码中，loadUrl() 方法用于加载指定的 Web 页面 URL。你也可以使用 loadData() 方法加载 HTML 字符串内容。

步骤 3：配置 WebView 设置（可选）

为了提高 WebView 的功能性，可能需要配置一些额外的设置，比如启用 JavaScript 支持、设置缓存等。下面的代码演示了如何配置 WebView 设置：

import ohos.agp.components.WebView;
import ohos.agp.components.webview.WebSettings;

public class WebViewExample {
private WebView webView;

public WebViewExample(Context context) {
webView = new WebView(context);
}

public void configureWebView() {
WebSettings webSettings = webView.getSettings();
// 启用 JavaScript
webSettings.setJavaScriptEnabled(true);
// 启用缓存
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
}

public void loadWebPage() {
webView.loadUrl("https://www.example.com");
}
}

在这个例子中，我们通过 WebSettings 配置 WebView，使其支持 JavaScript 并使用缓存策略。

与 Web 内容交互：通过 JavaScriptBridge 与 Web 页面交互

WebView 除了可以加载 Web 页面之外，还能与页面中的 JavaScript 进行交互。通过 JavaScriptBridge，鸿蒙应用可以调用 Web 页面的 JavaScript 函数，或接收 Web 页面的回调。

步骤 1：通过 JavaScriptBridge 调用 JavaScript 函数

鸿蒙提供了 addJavascriptInterface() 方法，可以让 Web 页面通过 JavaScript 调用本地应用的方法。通过这种方式，开发者可以实现 Web 页面与原生应用之间的双向数据传输。

import ohos.agp.components.WebView;
import ohos.agp.components.webview.WebSettings;

public class WebViewExample {
private WebView webView;

public WebViewExample(Context context) {
webView = new WebView(context);
// 配置 WebView 设置
configureWebView();
}

public void configureWebView() {
WebSettings webSettings = webView.getSettings();
// 启用 JavaScript
webSettings.setJavaScriptEnabled(true);

// 添加 JavaScript 接口
webView.addJavascriptInterface(new JavaScriptInterface(), "Android");

// 加载 Web 页面
webView.loadUrl("file:///asset/www/index.html");
}

// 定义 JavaScript 接口
public class JavaScriptInterface {
@android.webkit.JavascriptInterface
public void showToast(String message) {
// 在这里处理 Web 页面传来的数据
System.out.println("Received message from JavaScript: " + message);
}
}
}

在上面的代码中，我们通过 addJavascriptInterface() 方法将 JavaScriptInterface 绑定到 WebView 中，并指定接口名称为 Android。在 Web 页面中，我们可以通过 Android.showToast() 调用 JavaScript 接口的方法。

步骤 2：在 Web 页面中调用本地方法

一旦绑定了 JavaScript 接口，Web 页面可以使用 JavaScript 来调用原生应用的方法。例如，假设 Web 页面中有一个按钮，点击该按钮时调用本地应用的 showToast() 方法：

<!DOCTYPE html>
<html>
<head>
<title>WebView Demo</title>
<script type="text/javascript">
function sendMessageToAndroid() {
// 调用 Android 端的方法
Android.showToast("Hello from Web!");
}
</script>
</head>
<body>
<button onclick="sendMessageToAndroid()">Send Message to Android</button>
</body>
</html>

在这个例子中，当用户点击按钮时，Web 页面会调用 Android.showToast() 方法，将消息传递给鸿蒙应用。

步骤 3：接收 Web 页面的回调

鸿蒙的 WebView 还允许 Web 页面通过 JavaScript 返回数据给应用。我们可以通过重写 onPageFinished() 方法来监听页面加载完成事件，并在此时执行额外的操作。

import ohos.agp.components.WebView;
import ohos.agp.components.webview.WebViewListener;

public class WebViewExample {
private WebView webView;

public WebViewExample(Context context) {
webView = new WebView(context);
webView.setWebViewListener(new WebViewListener() {
@Override
public void onPageStarted(WebView webView, String url) {
// 页面开始加载
}

@Override
public void onPageFinished(WebView webView, String url) {
// 页面加载完成
System.out.println("Page loaded: " + url);
// 可以执行更多的交互操作
}
});
}

public void loadWebPage() {
webView.loadUrl("https://www.example.com");
}
}

在这个代码示例中，我们通过 onPageFinished() 方法监听 Web 页面加载完成的事件，并在页面加载完成时执行操作。

代码示例：使用 WebView 加载和显示 Web 内容

以下是一个完整的代码示例，演示如何在鸿蒙应用中使用 WebView 加载 Web 页面，并通过 JavaScriptBridge 与 Web 页面交互。

import ohos.app.Context;
import ohos.agp.components.WebView;
import ohos.agp.components.webview.WebSettings;

public class WebViewDemo {
private WebView webView;

public WebViewDemo(Context context) {
webView = new WebView(context);
configureWebView();
loadWebPage();
}

public void configureWebView() {
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true); // 启用 JavaScript
webView.addJavascriptInterface(new JavaScriptInterface(), "Android");
}

public void loadWebPage() {
webView.loadUrl("file:///asset/www/index.html"); // 加载本地 HTML 页面
}

// 定义 JavaScript 接口
public class JavaScriptInterface {
@android.webkit.JavascriptInterface
public void showToast(String message) {
System.out.println("Message from Web: " + message);
}
}
}

在 Web 页面中：

<!DOCTYPE html>
<html>
<head>
<title>WebView Demo</title>
<script type="text/javascript">
function sendMessageToAndroid() {
Android.showToast("Hello from Web!");
}
</script>
</head>
<body>
<button onclick="sendMessageToAndroid()">Send Message to Android</button>
</body>
</html>

小结

通过使用鸿蒙的 WebView，开发者可以在应用中嵌入 Web 页面，并通过 JavaScriptBridge 实现与 Web 内容的交互。WebView 提供了强大的功能，能够加载 Web 页面、处理 JavaScript 调用、实现本地与 Web 的数据传输。通过本文的示例，您可以轻松实现 Web 内容的加载和交互，为用户提供更加丰富的功能和体验。

❤️ 如果本文帮到了你…

• 请点个赞，让我知道你还在坚持阅读技术长文！
• 请收藏本文，因为你以后一定还会用上！
• 如果你在学习过程中遇到bug，请留言，我帮你踩坑！