社区编辑申请
注册/登录
HarmonyOS - JavaUI 框架之使用WebView加载本地H5页面
系统 OpenHarmony
WebView 是一个基于 webkit 引擎、展现 web 页面的控件,可以显示和渲染web页面,相当于应用中的浏览器,可以加载网络上或应用本地的HTML文件。

​想了解更多内容,请访问:​

​51CTO OpenHarmony技术社区​

​https://ost.51cto.com​

前言

现在应用开发中都不可避免的需要加载一些H5页面。HarmonyOS应用通过 WebView 来提供应用中集成H5页面的能力。在HarmonyOS应用中,出于安全考虑,WebView不支持直接通过File协议加载资源文件或本地文件,所以不能直接通过文件的存放路径,加载本地H5页面,下面介绍一下在HarmonyOS应用中,如何实现加载本地H5页面。

WebView使用介绍

WebView 是一个基于 webkit 引擎、展现 web 页面的控件,可以显示和渲染web页面,相当于应用中的浏览器,可以加载网络上或应用本地的HTML文件。

WebView的能力:

  • 显示和渲染 Web 页面。
  • 直接使用 HTML文件(网络上或本地 resources 中)作布局。
  • 可和 JavaScript 交互调用。

效果展示:

实现步骤:

1. 首先在resources目录下创建rawfile文件夹,该目录下的资源会打包进应用内。

2.将H5页面放到entry/src/main/resources/rawfile文件夹下。

3.WebView 要访问本地 Web 文件,需要通过DataAbility 的方式进行访问,这里创建一个 WebAbility.java 文件。

在WebAbility中进行本地资源文件的解析,重写 RawFileDescriptor(),获取到我们解析到的RawFileDescriptor对象,RawFileDescriptor可以看作是我们访问HarmonyOS应用本地资源文件的入口,通过该入口可以将我们的H5页面加载到WebView控件上。

注意:private static final String ENTRY_PATH_PREFIX = “entry/resources” 这里将 “entry” 替换成自己对应modul的路径。

public class WebAbility 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");
}
// 获取uri对应的资源路径 例如:com.example.dataability/entry/resources/rawfile/
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)) {
// 打开entry/resources/rawfile目录下的资源
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);
}
}

4.然后在 “entry/src/main/config.json” 中完成 WebAbility 的声明,代码如下:

 {
"name": "com.example.webdemo.WebAbility",
"type": "data",
"uri": "dataability://com.example.webdemo.dataability"
},

找到config.json的对应的module,在abilities节点中添加以上代码,具体位置如下:

"abilities": [
{
"name": "com.example.webdemo.WebAbility",
"type": "data",
"uri": "dataability://com.example.webdemo.dataability"
},
{
"visible": true,
"name": "com.example.webdemo.MainAbility",
"icon": "$media:icon",
"description": "$string:mainability_description",
"formsEnabled": true,
"label": "$string:entry_MainAbility",
"type": "page",
}
],
......

在abilities中声明的 uri 的值便是webview加载的路径,在WebAbility里面进行了资源文件的解析,当路径指向WebAbility时,H5页面就可以在WebAbility上显示了。

5.创建 WebView 并加载本地页面。

在MainAbility的onStart()中创建WebView,并配置支持访问Data Ability资源,支持JavaScript,通过webView.load()加载本地H5页面,加载地址为:“dataability://com.example.webdemo.dataability/rawfile/help-center/index.html#/”,“dataability://com.example.webdemo.dataability”是指向解析本地资源文件的Ability,后面拼接加载页面的路径,具体代码如下:

  DirectionalLayout dLayout = new DirectionalLayout(this);
dLayout.setLayoutConfig(new ComponentContainer.LayoutConfig(
ComponentContainer.LayoutConfig.MATCH_PARENT,
ComponentContainer.LayoutConfig.MATCH_PARENT
));
super.setUIContent(dLayout);
WebView webView = new WebView(this);
webView.getWebConfig().setJavaScriptPermit(true);
webView.getWebConfig().setDataAbilityPermit(true);
webView.load("dataability://com.example.webdemo.dataability/rawfile/help-center/index.html#/");
dLayout.addComponent(webView);

总结

实际项目中APP中的H5页面一般都是通过网络获取的,并不需要本地解析资源文件。但是手机断网或者网络不稳定时,可以下载H5页面到本地,通过以上方式使用webview加载本地H5页面,避免出现手机断网或者网络不稳定时页面加载不了的情况。

​想了解更多内容,请访问:​

​51CTO OpenHarmony技术社区​

​https://ost.51cto.com​

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2022-06-05 21:09:47

Python办公自动化

2022-06-22 09:19:55

HDC鸿蒙ADB命令

2022-05-23 07:48:10

zabbix监控CentOS7

2022-06-07 17:01:31

UI框架前端

2022-05-11 08:23:54

自动化测试软件测试

2022-06-27 17:46:53

PythonFlask

2022-06-24 11:14:00

美团开源

2022-06-27 09:54:38

编程语言JavaC++

2022-06-01 11:14:42

Java代码技巧

2022-06-15 16:16:21

分布式数据库鸿蒙

2022-06-26 09:55:00

接口自动化项目

2022-04-20 20:28:40

HDF 驱动框架鸿蒙操作系统

2022-05-09 11:52:38

Java卡片服务卡片

2022-05-11 15:08:52

驱动开发系统移植

2022-06-13 12:43:13

Java模块

2022-05-24 15:06:57

AbilityeTS FA鸿蒙

2022-04-07 15:28:16

HarmonyOS鸿蒙操作系统

2022-06-21 09:02:49

python技巧

2022-04-02 20:45:04

Hi3516开发板操作系统鸿蒙

2022-06-21 14:10:43

NIST网络安全

同话题下的热门内容

OHOS构建自定义服务实战基于OpenHarmony3.1的购物车应用的实现啃论文俱乐部—数据密集型应用内存压缩HarmonyOS - 方舟开发框架ArkUI 流光按钮效果华为智慧屏分布式语音音乐软件,可见即可说OpenHarmony3.1-Ace-Formcomponent源码解析HarmonyOS Canvas 实现时钟HarmonyOS门锁品类的临时密码、照片编解码工具技术

编辑推荐

HarmonyOS 2.0鸿蒙第二期开发者Beta公测申请指南HarmonyOS LYEVK-3861开发板播放《蜜雪冰城》鸿蒙HarmonyOS分布式软总线:构建低时延、高带宽的多设备虚拟网络华为HarmonyOS的强势突围: 直面物联网迷宫的蓄力进击鸿蒙HarmonyOS2.0发布会现场回忆录
我收藏的内容
点赞
收藏

51CTO技术栈公众号