锐客网

  1. 首页 > 生活百科 > it技术 > >

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

IT知识WebView

花门楼前见秋草，岂能贫贱相看老。这篇文章主要讲述#私藏项目实操分享#利用鸿蒙JavaUI 框架的 WebView 加载本地冰墩墩网页相关的知识，希望能为你提供帮助。
?起因最近冰墩墩也太火了，各路大神纷纷表示用代码画冰墩墩，而我也刚好看到一个前端大神 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"// 增加网络权限

],

【#私藏项目实操分享#利用鸿蒙JavaUI 框架的 WebView 加载本地冰墩墩网页】在 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

    推荐阅读


    上一篇：Redis 竟然能用 List 实现消息队列

    下一篇：Redis Cluster集群工作原理+集群操作实战+数据故障切换 #yyds干货盘点#