HarmonyOS - JavaUI 框架之使用WebView加载本地H5页面 原创 精华
作者:陈忠蔚
前言
现在应用开发中都不可避免的需要加载一些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的路径
4.然后在 “entry/src/main/config.json” 中完成 WebAbility 的声明,代码如下:
找到config.json的对应的module,在abilities节点中添加以上代码,具体位置如下:
在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,后面拼接加载页面的路径,具体代码如下:
总结
实际项目中APP中的H5页面一般都是通过网络获取的,并不需要本地解析资源文件。但是手机断网或者网络不稳定时,可以下载H5页面到本地,通过以上方式使用webview加载本地H5页面,避免出现手机断网或者网络不稳定时页面加载不了的情况。
更多原创内容请关注:中软国际 HarmonyOS 技术团队
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
很好的方法,学习了!