鸿蒙 -webview 的使用和 JS 交互（附源码）【鸿蒙开发 03】

作者：坚果

2022 年 1 月 20 日
本文字数：5989 字
阅读完需：约 20 分钟

作者：坚果
公众号："大前端之旅"
华为云享专家，InfoQ 签约作者，阿里云专家博主，51CTO 博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括 Flutter,小程序,安卓，VUE，JavaScript。

日常我们在开发项目时，为了项目快速的开发和迭代，难免会用到 H5 页面。使用鸿蒙进行项目开发时，也一样免不了要加载 H5 页面，在移动开发中打开 H5 页面需要使用WebView组件。同时，为了和 H5 页面进行数据交换，有时候还需要借助JSBridge来实现客户端与 H5 之间的通讯。

那么鸿蒙之中用到的技术是什么呢？WebView

在此之前，先看一个报错

App Launch: The Huawei Lite Simulator supports only Lite projects.

这是什么原因呢，其实简单，就是你没有登陆

所以解决这个的问题就是你重新登录就好了。

汉化（V3.0 Beta2（2021-12-31）版本以上支持）

还有一个问题可能就是目前编辑器大家看着不太习惯，需要汉化一下，那么如何汉化呢，结合 Androidstudio 的经验，分为如下几步

第一步点击 File-setting

第二步 plugins 里面选择如图所示的插件，并安装。

第三步，重启，汉化完成

第一步创建项目

点击 next

第二步等依赖安装安装完成

第三步打开模拟器

点击登录，打开浏览器授权

选择 p40

启动模拟器

第五步开始正文

接下来开始正文。

应用预览：

点击"打开网址"按钮会加载上方网址的 Web 页面，通过后退"和"前进"按钮实现 Web 页面间的导航。
点击"加载本地网页"按钮加载本地 Web 页面，点击"发送消息给本地 html"或者 Web 页面中的"调用 Java 方法"按钮，实现应用与 Web 页面间的交互。

这里是 http 访问方式，鸿蒙的默认是 https 访问模式，如果您的请求网址是 http 开头的，可以继续查看后面的教程。

1. 增加一个 WebView 组件

步骤 1 - 在"resources/base/layout/ability_main.xml"文件中创建 WebView，示例代码如下：

<ohos.agp.components.webengine.WebView     ohos:id="$+id:webview"     ohos:height="match_parent"     ohos:width="match_parent"> </WebView>

复制代码

步骤 2 - 在"slice/MainAbilitySlice.java"文件中通过如下方式获取 WebView 对象，示例代码如下：

WebView webview = (WebView) findComponentById(ResourceTable.Id_webview);

复制代码

2. 通过 WebView 加载 Web 页面

WebView 加载页面分为加载 Web 页面和加载本地 Web 页面两种情况，接下来我们将分别进行介绍。

1.WebView 加载网络 Web 页面

跟 Android 类似，要访问网络，我们首先要配置网络访问权限，在 config.json 的"module"节点最后，添加上网络权限代码

module": { ...... "reqPermissions": [ {    "name": "ohos.permission.INTERNET"  } ] }

复制代码

2 设置访问模式

鸿蒙的默认是 https 访问模式，如果您的请求网址是 http 开头的，请在 config.json 文件中的 deviceConfig 下，添加如下设置

"deviceConfig": {    "default": {      "network": {        "cleartextTraffic": true      }    }  },

复制代码

在"slice/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 对象可以定制该行为，示例代码如下：

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 等方法。WebView 提供 Navigator 类进行历史记录的浏览和处理，通过 getNavigator()方法获取该类的对象，使用 canGoBack()或 canGoForward()方法检查是否可以向后或向前浏览，使用 goBack()或 goForward()方法向后或向前浏览，示例代码如下：

Navigator navigator = webView.getNavigator(); if (navigator.canGoBack()) {     navigator.goBack(); } if (navigator.canGoForward()) {     navigator.goForward(); }

复制代码

3.WebView 加载本地 Web 页面

将本地的 HTML 文件放在"resources/rawfile/"目录下，在本教程中命名为 test.html。在 HarmonyOS 系统中，WebView 要访问本地 Web 文件，需要通过 DataAbility 的方式进行访问，DataAbility 的具体使用方法可以参考开发

DataAbility,关于 DataAbility 的相关知识，后面也会继续展示，谁让他是最重要的内容呢。

在"entry/src/main/config.json"中完成 DataAbility 的声明，示例代码如下：

module": { ...... "abilities": [ {   "name": "com.huawei.codelab.DataAbility",   "type": "data",   "uri": "dataability://com.example.harmonyosdemo.DataAbility" } ] }

复制代码

另外需要实现一个 DataAbility，通过实现 openRawFile(Uri uri, String mode)方法，完成 WebView 对本地 Web 页面的访问，示例代码如下：

public class DataAbility extends Ability {     ...     @Override     public RawFileDescriptor openRawFile(Uri uri, String mode) throws FileNotFoundException {         if (uri == null) {;             return super.openRawFile(uri, mode);         }         String path = uri.getEncodedPath();         int splitIndex = path.indexOf('/', 1);         String providerName = Uri.decode(path.substring(1, splitIndex));         String rawFilePath = Uri.decode(path.substring(splitIndex + 1));         RawFileDescriptor rawFileDescriptor = null;         try {             rawFileDescriptor = getResourceManager().getRawFileEntry(rawFilePath).openRawFileDescriptor();         } catch (IOException e) {             // 异常处理         }         return rawFileDescriptor;     } }

复制代码

在"slice/MainAbilitySlice.java"中声明需要访问的文件路径，通过 webview.load(String url)方法加载本地 Web 页面，可以通过 WebConfig 类的对象对 WebView 访问 DataAbility 的能力进行配置，示例代码如下：

private static final String URL_LOCAL = "dataability://com.huawei.codelab.DataAbility/resources/rawfile/test.html"; // 配置是否支持访问DataAbility资源，默认为true webConfig.setDataAbilityPermit(true); webview.load(URL_LOCAL);

复制代码

4. 实现应用与 WebView 中的 Web 页面间的通信

本教程以本地 Web 页面"resources/rawfile/test.html"为例介绍如何实现应用与 WebView 中的 Web 页面间交互。首先需要对 WebConfig 进行配置，使能 WebView 与 Web 页面 JavaScript 交互的能力，示例代码如下：

// 配置是否支持JavaScript，默认值为false webConfig.setJavaScriptPermit(true);

复制代码

1.应用调用 Web 页面

在"resources/rawfile/test.html"中编写 callJS 方法，待应用调用，示例代码如下：

<script type="text/javascript"> // 应用调用Web页面 function callJS(message) {     alert(message); } </script>

复制代码

在"slice/MainAbilitySlice.java"中实现应用对 JavaScript 的调用，示例代码如下：

webview.executeJs("javascript:callJS('这是来自JavaSlice的消息')", msg -> {         // 在这里处理Js的方法的返回值     });

复制代码

我们可以通过 setBrowserAgent 方法设置自定义 BrowserAgent 对象，以观测 JavaScript 事件及通知等，通过复写 onJsMessageShow 方法来接管 Web 页面弹出 Alert 对话框的事件，示例代码如下：

webview.setBrowserAgent(new BrowserAgent(this) {             @Override             public boolean onJsMessageShow(WebView webView, String url, String message, boolean isAlert, JsMessageResult result) {                 LogUtil.info(TAG,"BrowserAgent onJsMessageShow : " + message);                 if (isAlert) {                     // 将Web页面的alert对话框改为ToastDialog方式提示                     new ToastDialog(getApplicationContext()).setText(message).setAlignment(LayoutAlignment.CENTER).show();                     // 对弹框进行确认处理                     result.confirm();                     return true;                 } else {                     return super.onJsMessageShow(webView, url, message, isAlert, result);                 }             }         });

复制代码

2.Web 页面使用 JavaScript 调用应用

在"resources/rawfile/test.html"中编写按钮，当按钮被点击时实现 JavaScript 对应用的调用，示例代码如下：

<body>     ...... <button id="button" onclick="sendData()" style="background-color:#70DBDB;height:30px;">调用Java方法</button> <script type="text/javascript">   function sendData() {     if (window.JsCallJava && window.JsCallJava.call) {         // Web页面调用应用         var rst = window.JsCallJava.call("这个是来自本地Web页面的消息");     } else {         alert('发送消息给WebviewSlice失败');     }   } </script> </body>

复制代码

在"slice/MainAbilitySlice.java"中实现应用对 JavaScript 发起的调用的响应，示例代码如下：

private static final String JS_NAME = "JsCallJava"; webview.addJsCallback(JS_NAME, str -> {   // 处理接收到的JavaScript发送来的消息，本教程通过ToastDialog提示确认收到Web页面发来的消息   new ToastDialog(this).setText(str).setAlignment(LayoutAlignment.CENTER).show();   // 返回给JavaScript   return "Js Call Java Success"; });

复制代码

总结

通过上面的完整代码，我们已经完成了 webbiew 的基本使用

仓库地址：https://github.com/ITmxs/hm_webview

第二步删除默认代码

打开 index.hml 文件，里面有默认代码如下：

<div class="container">     <text class="title">         {{ $t('strings.hello') }} {{ title }}     </text> </div>

复制代码

第三步，开始学习

首先将图片放到 common 文件夹下面的 images 里面，注意，我的图片文件名是 flutter.png，

从上面布局效果图可以看到，界面主要由 image 组件和 text 组件组成，我们现在 index.html 中添加 image 组件和 text 组件，并添加对应的 class，用于设置组件的显示效果，代码如下：

<div class="container">    <image class="img img-translate" src="/common/images/flutter.png"></image>    <text class="text">translate</text>    <image class="img img-rotate" src="/common/images/flutter.png"></image>    <text class="text">rotate</text>    <image class="img img-rotateY" src="/common/images/flutter.png"></image>    <text class="text">rotateY</text>    <image class="img img-scale" src="/common/images/flutter.png"></image>    <text class="text">scale</text>    <image class="img img-opacity" src="/common/images/flutter.png"></image>    <text class="text">opacity</text></div>

复制代码

第四步，为页面设计样式

在这个任务中，我们将一起为任务二中写好的页面添加样式，上面所有的组件都定义了 class 属性，它对应的样式都定义在 index.css 中，有关 css 更多的知识可以参考css语法参考。这部分定义了整个页面中各个组件的样式。在 index.css 中先添加如下代码：

.container {     background-color: #F8FCF5;     flex-direction: column;     justify-content: center;     align-items: center; }  .img {     margin-top: 10px;     height: 100px;     width: 100px;     animation-timing-function: ease;     animation-duration: 2s;     animation-delay: 0s;     animation-fill-mode: forwards;     animation-iteration-count: infinite; }  .text {     font-size: 20px; }  .img-translate {     animation-name: translateAnim; }  .img-rotate {     animation-name: rotateAnim; }  .img-rotateY {     animation-name: rotateYAnim; }  .img-scale {     animation-name: scaleAnim; }  .img-mixes {     animation-name: mixesAnim; }  .img-opacity {     animation-name: opacityAnim; }  /*从-100px平移到100px*/ @keyframes translateAnim {     from {         transform: translate(-100px);     }      to {         transform: translate(100px);     } }  /*从0°旋转到360°*/ @keyframes rotateAnim {     from {         transform: rotate(0deg);     }      to {         transform: rotate(360deg);     } }  /*沿Y轴旋转，从0°旋转到360°*/ @keyframes rotateYAnim {     from {         transform: rotateY(0deg);     }      to {         transform: rotateY(360deg);     } }  /*从0倍缩放到1.2倍大小*/ @keyframes scaleAnim {     from {         transform: scale(0);     }      to {         transform: scale(1.2);     } }  /*透明度从0变化到1*/ @keyframes opacityAnim {     from {         opacity: 0;     }      to {         opacity: 1;     } }