利用鸿蒙JavaUI 框架的 WebView 加载本地冰墩墩网页原创精华

宇宙之一粟

发布于 2022-2-17 14:49

浏览

2收藏

春节不停更，此文正在参加「星光计划-春节更帖活动」

起因

最近冰墩墩也太火了，各路大神纷纷表示用代码画冰墩墩，而我也刚好看到一个前端大神 Austin 用 JavaScript 前端写了一个冰墩墩，大家可以下载代码，本地打开就可以看到这个可爱的冰墩墩了。代码在后文参考资料中，大家可以自己下载。

自己前端知识既然不够，而刚好自己也在学习鸿蒙，这不就想着怎么把这个顶流拉取到本地然后读取到我的鸿蒙代码中呢，这不我立马搜索一下：鸿蒙如何读取本地 HTML 。

然后就有了对 WebView 的探索，最后终于让我琢磨成功，运行成功后的样子预览图如下：

利用鸿蒙JavaUI 框架的 WebView 加载本地冰墩墩网页-鸿蒙开发者社区

除了对本地文件的读取，还支持对网络页面的访问，比如我这里就是读取 HarmonyOS应用开发官网，读者当然可以自己想访问哪个网页就访问自己的网页。

什么是 Webview

其实现在很多应用 App 里都内置了 Web 网页，比如微信、淘宝。在 Android 中就是利用 WebView 这一组件实现。WebView 是一个基于 webkit 引擎、展现 web 页面的控件。

鸿蒙也不例外，也通过 WebView 来提供应用中集成 Web 页面的能力。

作用：

显示和渲染 Web 页面
直接使用 HTML文件（网络上或本地 resources 中）作布局
可和 JavaScript 交互调用

WebView 使用

如果我们要加载远程网页，就要增加对网络的支持。在 config.json 中写入如下代码：

  "module": {
    "package": "com.yuzhou1su.webviewdemo",
    "name": ".MyApplication",
    "mainAbility": "com.yuzhou1su.webviewdemo.MainAbility",
    "deviceType": [
      "phone", "tv", "tablet"
    ],
    "reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"	// 增加网络权限
      }
    ],
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

在 layout 的 ability_main.xml 中创建 WebView

在"slice/MainAbilitySlice.java"文件中通过 webview.load(String url) 方法访问具体的Web 页面，通过 WebConfig 类对 WebView 组件的行为进行配置，代码如下：

package com.yuzhou1su.webviewdemo.slice;

import com.yuzhou1su.webviewdemo.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.TextField;
import ohos.agp.components.webengine.BrowserAgent;
import ohos.agp.components.webengine.JsMessageResult;
import ohos.agp.components.webengine.ResourceRequest;
import ohos.agp.components.webengine.WebAgent;
import ohos.agp.components.webengine.WebConfig;
import ohos.agp.components.webengine.WebView;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;

public class MainAbilitySlice extends AbilitySlice {

    private static final String URL_LOCAL = "dataability://com.yuzhou1su.webviewdemo.DataAbility/resources/rawfile/BingDwenDwen.html";
    private static final String JS_NAME = "JsCallJava";
    private WebView webview;
    private TextField urlTextField;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        initView();
    }

    private void initView() {
        webview = (WebView) findComponentById(ResourceTable.Id_webview);
        webview.getWebConfig().setDataAbilityPermit(true);  //这个要加上，设置 webview 支持打开本地文件
        urlTextField = (TextField) findComponentById(ResourceTable.Id_textField);
        initButton();
        configWebView();
    }

    private void configWebView() {
        WebConfig webConfig = webview.getWebConfig();

        // 是否支持Javascript，默认值false
        webConfig.setJavaScriptPermit(true);
        webview.setWebAgent(new WebAgent() {
            @Override
            public boolean isNeedLoadUrl(WebView webView, ResourceRequest request) {
                if (request == null || request.getRequestUrl() == 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);
                }
            }
        });

        webview.setBrowserAgent(new BrowserAgent(this) {
            @Override
            public boolean onJsMessageShow(WebView webView, String url, String message, boolean isAlert, JsMessageResult result) {
                if (isAlert) {
                    new ToastDialog(getApplicationContext()).setText(message).setAlignment(LayoutAlignment.CENTER).show();
                    result.confirm();
                    return true;
                } else {
                    return super.onJsMessageShow(webView, url, message, isAlert, result);
                }
            }
        });

        // 配置JS发来的消息处理
        webview.addJsCallback(JS_NAME, str -> {
            // 处理接收到的Js发送来的消息
            new ToastDialog(this).setText(str).setAlignment(LayoutAlignment.CENTER).show();

            // 返回给Js
            return "Js Call Java Success";
        });
    }

    private void initButton() {
        initLoadUrlButton();
        initLoadLocalUrlButton();
    }


    private void initLoadLocalUrlButton() {
        Button loadLocalUrlButton = (Button) findComponentById(ResourceTable.Id_load_local_url);
        loadLocalUrlButton.setClickedListener(component -> {
            webview.load(URL_LOCAL);
        });
    }

    private void initLoadUrlButton() {
        Button loadUrlButton = (Button) findComponentById(ResourceTable.Id_loadUrl);
        loadUrlButton.setClickedListener(component -> {
            webview.load(urlTextField.getText());
        });
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.

在 background_ability_main.xml 写入如下代码：

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <solid
        ohos:color="#F8F1EAEA"/>
</shape>
1.
2.
3.
4.
5.
6.

在 background_button.xml 写入如下代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="20vp"/>
    <solid
        ohos:color="#FF46F5C3"/>
</shape>
1.
2.
3.
4.
5.
6.
7.
8.

WebView 读取本地页面

将本地的 HTML 文件放在"resources/rawfile/"目录下，在本教程中命名为 BingDwenDwen.html 。在 HarmonyOS 系统中，WebView 要访问本地 Web 文件，需要通过DataAbility 的方式进行访问，所以此处创建 DataAbility.java 文件，写入如下代码：

package com.yuzhou1su.webviewdemo;

import java.io.FileNotFoundException;
import java.io.IOException;

import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import ohos.global.resource.RawFileDescriptor;
import ohos.utils.net.Uri;

public class DataAbility extends Ability {

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
    }

    @Override
    public RawFileDescriptor openRawFile(Uri uri, String mode) throws FileNotFoundException {
        if (uri == null) {
            return super.openRawFile(uri, mode);
        }
        String path = uri.getEncodedPath();
        final int splitIndex = path.indexOf('/', 1);
        final 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;
    }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.

然后在 “entry/src/main/config.json” 中完成 DataAbility 的声明，代码如下：

{
        "name": "com.yuzhou1su.webviewdemo.DataAbility",
        "type": "data",
        "uri": "dataability://com.yuzhou1su.webviewdemo.DataAbility"
      }
1.
2.
3.
4.
5.

至此，整个 config.json 文件内容如下：

{
  "app": {
    "bundleName": "com.yuzhou1su.webviewdemo",
    "vendor": "yuzhou1su",
    "version": {
      "code": 1000000,
      "name": "1.0.0"
    }
  },
  "deviceConfig": {},
  "module": {
    "package": "com.yuzhou1su.webviewdemo",
    "name": ".MyApplication",
    "mainAbility": "com.yuzhou1su.webviewdemo.MainAbility",
    "deviceType": [
      "phone", "tv", "tablet"
    ],
    "reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
    "distro": {
      "deliveryWithInstall": true,
      "moduleName": "entry",
      "moduleType": "entry",
      "installationFree": true
    },
    "abilities": [
      {
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ],
        "orientation": "unspecified",
        "name": "com.yuzhou1su.webviewdemo.MainAbility",
        "icon": "$media:icon",
        "description": "$string:mainability_description",
        "label": "$string:entry_MainAbility",
        "type": "page",
        "launchType": "standard"
      },
      {
        "name": "com.yuzhou1su.webviewdemo.DataAbility",
        "type": "data",
        "uri": "dataability://com.yuzhou1su.webviewdemo.DataAbility"
      }
    ]
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.

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

private static final String URL_LOCAL = "dataability://com.yuzhou1su.webviewdemo.DataAbility/resources/rawfile/BingDwenDwen.html";
    private static final String JS_NAME = "JsCallJava";
    private WebView webview;
    private TextField urlTextField;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        initView();
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.