#私藏项目实操分享#利用鸿蒙JavaUI 框架的 WebView 加载本地冰墩墩网页

Posted 2022-02-18 宇宙之一粟

​起因

最近冰墩墩也太火了，各路大神纷纷表示用代码画冰墩墩，而我也刚好看到一个前端大神 Austin 用 javascript 前端写了一个冰墩墩，大家可以下载代码，本地打开就可以看到这个可爱的冰墩墩了。代码在后文参考资料中，大家可以自己下载。
自己前端知识既然不够，而刚好自己也在学习鸿蒙，这不就想着怎么把这个顶流拉取到本地然后读取到我的鸿蒙代码中呢，这不我立马搜索一下：鸿蒙如何读取本地 HTML 。
然后就有了对 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"  // 增加网络权限
      
    ],

在 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 #私藏项目实操分享#一个后端开发到鸿蒙开发的简单尝试

 #私藏项目实操分享#如何利用 onlyoffice 实现文档格式转换
 #私藏项目实操分享#专为初学者打造—Spring框架学习笔记
 #私藏项目实操分享#Spring IOC案例
 #私藏项目实操分享#愚公系列2022年05月 Python教学课程 75-DRF框架之排序
 #私藏项目实操分享#愚公系列2022年05月 Python教学课程 72-DRF框架之认证和权限