4.7【HarmonyOS鸿蒙开发】组件WebView

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

WebView提供在应用中集成Web页面的能力。

说明

请使用真机或模拟器运行查看WebView效果，预览器不支持WebView显示。
只有预置WebView能力的真机设备才支持WebView功能。具体请以实际设备支持情况为准。智能穿戴设备不支持WebView。

一、WebView的使用方法

WebView派生于通用组件Component，可以像普通组件一样进行使用。

方式一：

1、在layout目录下的xml文件中创建WebView。

2、在MainAbility.java文件中，使用load方法加载Web页面。

package com.example.hanruwebview.slice;

import com.example.hanruwebview.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.webengine.WebView;

public class MainAbilitySlice extends AbilitySlice {
    private static final String EXAMPLE_URL="https://www.harmonybus.net/";
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        // 加载WebView
        WebView webView = (WebView) findComponentById(ResourceTable.Id_webview1);
        webView.getWebConfig() .setJavaScriptPermit(true);  // 如果网页需要使用JavaScript，增加此行；如何使用JavaScript下文有详细介绍
        final String url = EXAMPLE_URL; // EXAMPLE_URL由开发者自定义
        webView.load(url);
    }
    
}

因为我们要打开网络，需要网络访问，那么就需要进行网络授权，在config.json文件中添加以下授权信息：

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

结构如下：

WX20210617-140834@2x

这里我们打开的是鸿蒙巴士主页：

方式二：

1、在ComponentContainer中创建WebView。

我们将Layout目录下新建一个xml布局文件：layout_webview_demo.xml，我们不需要添加任何控件，只要在根布局中添加id属性即可。

<?xml version="1.0" encoding="utf-8"?>

然后在在slice目录下新建一个AbilitySlice，SecondAbilitySlice.java

package com.example.hanruwebview.slice;

import com.example.hanruwebview.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.webengine.WebView;

public class SecondAbilitySlice extends AbilitySlice {
    private static final String EXAMPLE_URL="https://www.baidu.com/";
    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_layout_webview_demo);


        // 方法二：
        WebView webView = new WebView(getContext());
        webView.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);
        webView.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);
        webView.getWebConfig() .setJavaScriptPermit(true);  // 如果网页需要使用JavaScript，增加此行；如何使用JavaScript下文有详细介绍

        DirectionalLayout directionalLayout = (DirectionalLayout) findComponentById(ResourceTable.Id_directionallayout1);
        directionalLayout.addComponent(webView);


    }
}

2、加载Web页面。

        final String url = EXAMPLE_URL; // EXAMPLE_URL由开发者自定义
        webView.load(url);

修改一下程序的入口：

package com.example.hanruwebview;

import com.example.hanruwebview.slice.MainAbilitySlice;
import com.example.hanruwebview.slice.SecondAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
//        super.setMainRoute(MainAbilitySlice.class.getName());
        super.setMainRoute(SecondAbilitySlice.class.getName());
    }
}

看一下效果：

二、定制网址加载行为

当Web页面进行链接跳转时，WebView默认会打开目标网址，通过以下方式可以定制该行为。

1、自定义WebAgent对象。

private class ExampleWebAgent extends WebAgent {
    @Override
    public boolean isNeedLoadUrl(WebView webView, ResourceRequest request) {
        Uri uri = request.getRequestUrl();
        if (EXAMPLE_URL.equals(uri.getDecodedHost())) {
            // 由WebView通过默认方式处理
            return false;
        }

        // 增加开发者自定义逻辑
        return super.isNeedLoadUrl(webView, request);
    }
}

2、设置自定义WebAgent至WebView。

webView.setWebAgent(new ExampleWebAgent());

三、浏览网页历史记录

1、通过getNavigator方法获取Navigator对象。

Navigator navigator = webView.getNavigator();

2、使用canGoBack()或canGoForward()检查是否可以向后或向前浏览，使用goBack()或goForward()向后或向前浏览。

if (navigator.canGoBack()) {
    navigator.goBack();
}
if (navigator.canGoForward()) {
    navigator.goForward();
}

四、使用JavaScript

通过以下方式，可以建立应用和页面间的JavaScript调用。

1、通过WebConfig启用JavaScript。

webView.getWebConfig().setJavaScriptPermit(true);

2、根据实际需要选择调用方式。

注入回调对象到页面内容，并在页面中调用该对象。

final String jsName = "JsCallbackToApp";
webview.addJsCallback(jsName, new JsCallback() {
    @Override
    public String onCallback(String msg) {
        // 增加自定义处理
        return "jsResult";
    }
});

在页面内通过JavaScript代码调用注入对象。

function callToApp() {
    if (window.JsCallbackToApp && window.JsCallbackToApp.call) {
       var result = JsCallbackToApp.call("message from web");
    }
}

在应用内调用页面内的JavaScript方法。

webview.executeJs("javascript:callFuncInWeb()", new AsyncCallback() {
    @Override
    public void onReceive(String msg) {
        // 在此确认返回结果
    }
});

五、观测Web状态

通过setWebAgent方法设置自定义WebAgent对象，以观测页面状态变更等事件：

webview.setWebAgent(new WebAgent() {
    @Override
    public void onLoadingPage(WebView webView, String url, PixelMap favicon) {
        super.onLoadingPage(webView, url, favicon);
        // 页面开始加载时自定义处理
    }

    @Override
    public void onPageLoaded(WebView webView, String url) {
        super.onPageLoaded(webView, url);
        // 页面加载结束后自定义处理
    }

    @Override
    public void onLoadingContent(WebView webView, String url) {
        super.onLoadingContent(webView, url);
        // 加载资源时自定义处理
    }

    @Override
    public void onError(WebView webView, ResourceRequest request, ResourceError error) {
        super.onError(webView, request, error);
        // 发生错误时自定义处理
    }
});

六、观测浏览事件

通过setBrowserAgent方法设置自定义BrowserAgent对象，以观测JavaScript事件及通知等：

webview.setBrowserAgent(new BrowserAgent(this) {
    @Override
    public void onTitleUpdated(WebView webView, String title) {
        super.onTitleUpdated(webView, title);
        // 标题变更时自定义处理
    }

    @Override
    public void onProgressUpdated(WebView webView, int newProgress) {
        super.onProgressUpdated(webView, newProgress);
        // 加载进度变更时自定义处理
    }
});

七、加载资源文件或本地文件

出于安全考虑，WebView不支持直接通过File协议加载资源文件或本地文件，如应用需实现相关业务，可参考如下方式实现。

方式一：通过processResourceRequest方法访问文件

1、通过setWebAgent方法设置自定义WebAgent对象，覆写processResourceRequest方法。

webview.setWebAgent(new WebAgent() {
    @Override
    public ResourceResponse processResourceRequest(WebView webView, ResourceRequest request) {
        final String authority = "example.com";
        final String rawFile = "/rawfile/";
        final String local = "/local/";
        Uri requestUri = request.getRequestUrl();
        if (authority.equals(requestUri.getDecodedAuthority())) {
            String path = requestUri.getDecodedPath();
            if (TextTool.isNullOrEmpty(path)) {
                return super.processResourceRequest(webView, request);
            }
            if (path.startsWith(rawFile)) {
                // 根据自定义规则访问资源文件
                String rawFilePath = "entry/resources/rawfile/" + path.replace(rawFile, "");
                String mimeType = URLConnection.guessContentTypeFromName(rawFilePath);
                try {
                    Resource resource = getResourceManager().getRawFileEntry(rawFilePath).openRawFile();
                    ResourceResponse response = new ResourceResponse(mimeType, resource, null);
                    return response;
                } catch (IOException e) {
                    HiLog.info(TAG, "open raw file failed");
                }
            }
            if (path.startsWith(local)) {
                // 根据自定义规则访问本地文件
                String localFile = getContext().getFilesDir() + path.replace(local, "/");
                HiLog.info(TAG, "open local file " + localFile);
                File file = new File(localFile);
                if (!file.exists()) {
                    HiLog.info(TAG, "file not exists");
                    return super.processResourceRequest(webView, request);
                }
                String mimeType = URLConnection.guessContentTypeFromName(localFile);
                try {
                    InputStream inputStream = new FileInputStream(file);
                    ResourceResponse response = new ResourceResponse(mimeType, inputStream, null);
                    return response;
                } catch (IOException e) {
                    HiLog.info(TAG, "open local file failed");
                }
            }
        }
        return super.processResourceRequest(webView, request);
    }
});

2、加载资源文件或本地文件。

// 加载资源文件 resources/rawfile/example.html
webView.load("https://example.com/rawfile/example.html");

// 加载本地文件 /data/data/com.example.dataability/files/example.html
webView.load("https://example.com/local/example.html");

方式二：通过Data Ability访问文件

1、创建Data Ability。

public class ExampleDataAbility 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 RawFileDescriptor openRawFile(Uri uri, String mode) throws FileNotFoundException {
        final int splitChar = '/';
        if (uri == null) {
            throw new FileNotFoundException("Invalid Uri");
        }

        // path will be like /com.example.dataability/rawfile/example.html
        String path = uri.getEncodedPath();
        final int splitIndex = path.indexOf(splitChar, 1);
        if (splitIndex < 0) {
            throw new FileNotFoundException("Invalid Uri " + uri);
        }

        String targetPath = path.substring(splitIndex);
        if (targetPath.startsWith(PLACEHOLDER_RAW_FILE)) {
            // 根据自定义规则访问资源文件
            try {
                return getResourceManager().getRawFileEntry(ENTRY_PATH_PREFIX + targetPath).openRawFileDescriptor();
            } catch (IOException e) {
                throw new FileNotFoundException("Not found support raw file at " + uri);
            }
        } else if (targetPath.startsWith(PLACEHOLDER_LOCAL_FILE)) {
            // 根据自定义规则访问本地文件
            File file = new File(getContext().getFilesDir(), targetPath.replace(PLACEHOLDER_LOCAL_FILE, ""));
            if (!file.exists()) {
                throw new FileNotFoundException("Not found support local file at " + uri);
            }
            return getRawFileDescriptor(file, uri);
        } else {
            throw new FileNotFoundException("Not found support file at " + uri);
        }
    }

    private RawFileDescriptor getRawFileDescriptor(File file, Uri uri) throws FileNotFoundException {
        try {
            final FileDescriptor fileDescriptor = new FileInputStream(file).getFD();
            return new RawFileDescriptor() {
                @Override
                public FileDescriptor getFileDescriptor() {
                    return fileDescriptor;
                }

                @Override
                public long getFileSize() {
                    return -1;
                }

                @Override
                public long getStartPosition() {
                    return 0;
                }

                @Override
                public void close() throws IOException {
                }
            };
        } catch (IOException e) {
            throw new FileNotFoundException("Not found support local file at " + uri);
        }
    }
}

2、在config.json中注册Data Ability。

{
"name": "com.example.webview.ExampleDataAbility",
"type": "data",
"uri": "dataability://com.example.dataability",
"metaData": {
    "customizeData": [
    {
        "name": "com.example.provider",
        "extra": "$profile:path"
    }
    ]
}
}

以及在resources/base/profile目录新增path.xml：

3、配置支持访问Data Ability资源。

webConfig.setDataAbilityPermit(true);

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

// 加载资源文件 resources/rawfile/example.html
webView.load("dataability://com.example.dataability/rawfile/example.html");

// 加载本地文件 /data/data/com.example.dataability/files/example.html
webView.load("dataability://com.example.dataability/local/example.html");

4.7【HarmonyOS鸿蒙开发】组件WebView