#过年不停更# 利用鸿蒙JavaUI 框架的 WebView 加载本地页面原创

宇宙之一粟

发布于 2022-2-16 18:56

浏览

0收藏

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

在上一篇文章中，我们介绍了 Ability 组件，这一篇文章我们将了解一下 WebView 组件，然后介绍一下如何读取一个本地页面。

WebView的使用方法

WebView 提供了将网页集成到应用程序中的能力。

WebView 派生于通用组件 Component。如果需要在自己的应用中嵌入Web页面，可以通过 WebView 组件进行开发。WebView 组件派生于通用组件 Component，可以像通用组件一样使用。

WebView组件构建

在"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>
1.
2.
3.
4.
5.

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

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

WebView加载本地Web页面

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

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

{
  "app": {
    "bundleName": "com.yuzhou1su.bingdwendwen",
    "vendor": "yuzhou1su",
    "version": {
      "code": 1000000,
      "name": "1.0.0"
    }
  },
  "deviceConfig": {},
  "module": {
    "package": "com.yuzhou1su.bingdwendwen",
    "name": ".MyApplication",
    "mainAbility": "com.yuzhou1su.bingdwendwen.MainAbility",
    "deviceType": [
      "phone"
    ],
    "distro": {
      "deliveryWithInstall": true,
      "moduleName": "entry",
      "moduleType": "entry",
      "installationFree": true
    },
    "abilities": [
      {
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ],
        "name": "com.yuzhou1su.bingdwendwen.DataAbility",
        "type": "data",
        "uri": "dataability://com.yuzhou1su.bingdwendwen.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.

实现我们刚刚定义的 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; 
    } 
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

通过dataability协议加载资源文件或本地文件。

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

package com.yuzhou1su.bingdwendwen;

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

import java.io.*;

public class DataAbility extends Ability {

    private static final String PLACEHOLDER_RAW_FILE = "/rawfile/";
    private static final String PLACEHOLDER_LOCAL_FILE = "/local/";
    private static final String ENTRY_PATH_PREFIX = "entry/resources";

    @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.
37.
38.