鸿蒙开发(17)---WebView组件

简介: 鸿蒙开发(17)---WebView组件

WebView组件


在实际的App开发中,我们往往还会直接跳转到网页。比如微信人家给你发了一个链接,默认也是在App之内打开的。


当然,很多公司的App就只使用一个WebView作为整体框架,比如我们常用的读书App:掌阅等。这样开发的好处是,只要使用少量的代码即可完成交互。


所以,今天我们将来介绍鸿蒙App的WebView组件的使用方式。


基本用法

首先,与前面讲解的其他组件一样,这里通过XML布局文件进行操作。示例代码如下:

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


需要注意的是,博主这里输入的是ohos.agp.components.webengine.WebView,你直接输入WebView也是有提示的。


不过,WebView与ohos.agp.components.webengine.WebView并不等价,这可能是鸿蒙的一个漏洞,直接输入WebView并不能使用这个组件。


接下来,就需要加载我们的网页进行显示,代码如下所示:

public class MainAbilitySlice extends AbilitySlice {
    private WebView webView;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.webView=(WebView)findComponentById(ResourceTable.Id_ability_main_webview);
        this.webView.load("https://www.baidu.com");
    }
}


很简单,我们使用load()函数进行网页的加载。不过,在主界面,直接这么加载是不会显示任何东西的。


防止WebView跳转到浏览器

这是因为,鸿蒙默认的WebView组件是直接跳转到浏览器的,而你在主页这么做,那连显示都不必,何必安装App呢?


所以,我们需要禁止WebView跳转到浏览器,它才可能在主页显示这个组件。而它的setWebAgent()方法就是防止跳转浏览器的。示例如下:


public class MainAbilitySlice extends AbilitySlice {
    private WebView webView;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.webView=(WebView)findComponentById(ResourceTable.Id_ability_main_webview);
        this.webView.setWebAgent(new WebAgent(){
            @Override
            public boolean isNeedLoadUrl(WebView webView, ResourceRequest request) {
                return super.isNeedLoadUrl(webView, request);
            }
        });
        this.webView.load("https://www.baidu.com/");
    }
}


这里就是默认设置一下WebAgent,并覆写isNeedLoadUrl方法,当然什么都不动就行。isNeedLoadUrl主要检查是否基于当前WebView请求加载。


运行之后,效果如下:



使用JavaScript

鸿蒙的WebView组件默认是不支持JavaScript,需要进行设置。通过如下代码,即可完成JavaScript交互。

webView.getWebConfig().setJavaScriptPermit(true);

网页调用App方法

要完成网页与App的交互,必然涉及到两者的数据交互以及方法的调用。比如,这里我们通过网页让App弹出网页指定的内容。示例如下:

final String jsName = "JsCallbackToApp";
    webView.addJsCallback(jsName, new JsCallback() {
        @Override
        public String onCallback(String msg) {
            new ToastDialog(getContext())
                .setText(msg)
                .show();
            return "jsResult";
        }
});


在网页中,我们需要通过JsCallbackToApp.call传递参数调用。代码如下:

function myClick() {
    var result = JsCallbackToApp.call("我是网页传递给App的数据");
}


App调用网页方法

同样的,我们有时候也要将App的处理结果传递给网页进行处理。这里我们通过executeJs()方法进行调用,示例如下:


webView.executeJs("javascript:aAddb(5,5)", new AsyncCallback<String>() {
    @Override
    public void onReceive(String msg) {
        new ToastDialog(getContext())
            .setText("a+b="+msg)
            .show();
    }
});


同时,需要定义与executeJs第1个方法参数同名的方法,代码如下:

function aAddb(a, b) {
    return a + b;
}


资源文件中引用网页

在鸿蒙App的项目中,有一个rawfile文件夹,是专门用于放置我们非应用配置的额外文件的。比如,这里我们放置html文件,如下图所示:

通过WebAgent的processResourceRequest()方法,我们可以直接按自己定义的文件规则加载html文件。代码如下:

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
      this.webView.setWebAgent(new WebAgent(){
            @Override
            public boolean isNeedLoadUrl(WebView webView, ResourceRequest request) {
                return super.isNeedLoadUrl(webView, request);
            }
            @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);
            }
        });
        this.webView.getWebConfig().setJavaScriptPermit(true);
        this.webView.load("https://example.com/rawfile/example.html");
    }
}


processResourceRequest()方法是在请求资源时调用。


而网页的源代码如下所示:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        <script type="text/javascript">
        function myClick() {
             var result = JsCallbackToApp.call("我是网页传递给App的数据");
        }
        function aAddb(a, b) {
            return a + b;
        }
        </script>
    </head>
    <body>
        <input
                type="button"
                onclick="myClick()"
                value="弹出鸿蒙ToastDialog"/>
    </body>
</html>


鸿蒙里面还有一个提示组件ToastDialog,但是这是一个简单的组件,在我们WebView进行交互的时候已经介绍过了,单独一篇博文太多,就不在赘述。


运行之后,效果如下:


本文源代码:https://github.com/liyuanjinglyj/JavaCardDemo

相关文章
|
1月前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
68 0
|
1月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Counter容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Counter容器组件
54 1
|
1月前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之ColumnSplit容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之ColumnSplit容器组件
44 0
|
1月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Column容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Column容器组件
63 0
|
1月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Badge组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Badge组件
95 0
|
1月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之QRCode组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之QRCode组件
75 2
|
1月前
|
IDE 开发工具 数据安全/隐私保护
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之PatternLock组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之PatternLock组件
75 0
|
1月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件
211 0
|
1月前
|
IDE 开发工具 Windows
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavDestination组件
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavDestination组件
76 3
|
18天前
|
JavaScript API
鸿蒙开发接口UI界面:【@ohos.mediaquery (媒体查询)】
鸿蒙开发接口UI界面:【@ohos.mediaquery (媒体查询)】
22 1

热门文章

最新文章