关键词:h5离线加载、HarmonyOS、OpenHarmony、文件操作、复制、解压
当下有一个场景,需要离线加载 h5离线资源zip包,并实现资源包的动态更新,那么仅靠 $rawfile并不能实现该功能,那么我们该如何实现?
我们可以充分利用文件管理实现该功能,将 rawfile 中默认离线 h5 资源 zip 压缩包复制到指定的沙箱路径中,随后解压,供webview直接加载沙箱中的h5资源,后续可提供在线下载的形式直接更新沙箱中文件内容达到页面更新的效果,那么开始。
rwafile文件拷贝完成后,若为h5离线资源包,该如何使用webview加载,并实现在线更新资源包?HarmonyOS/OpenHarmony 离线加载web资源,并实现web资源更新
1. 使用上下文的 resourceManager 获取文件 Uint8Array 数据
此处的 zip/ohosInteractive.zip 对于的为 rawfile 目录下的 zip目录中 ohosInteractive.zip 文件,根据自己的业务需求自行调整即可。
let uint8Array: Uint8Array = this.context.resourceManager.getRawFileContentSync("zip/ohosInteractive.zip");
2. 将获取的 unit8Array 数据 转换为 ArrayBuffer
// 此处需要导入arkts kit库
import { buffer } from '@kit.ArkTS';
let bf = buffer.from(uint8Array).buffer;
3. 创建沙箱路径
创建沙箱路径时可使用应用上下文获取到filesDir,随后在该目录下创建自己的目录,方便统一管理
// 导入文件模块
import { fileIo as fs } from '@kit.CoreFileKit';
// 创建沙箱目录
let boxPath = this.context.getApplicationContext().filesDir
let unzipPath = boxPath + "/webSources"
try {
fs.mkdirSync(unzipPath)
} catch (e) {
}
4. 在创建的沙箱路径下创建待拷贝数据的空文件
需要注意的是,沙箱路径下本身没有 ohosInteractive.zip 文件,但是我们使用 open() 方法时设置 fs.OpenMode.CREATE 权限,即可自动创建出该文件,并配置读写权限。
let boxPath = this.context.getApplicationContext().filesDir
let zipPath = boxPath + "/webSources/ohosInteractive.zip"
const fsOpen = fs.openSync(zipPath, fs.OpenMode.READ_WRITE | fs.OpenMode.READ_ONLY | fs.OpenMode.CREATE | fs.OpenMode.TRUNC)
5. 写入数据
在第 2 步中,已经获取到了 rawfie 下资源文件的 ArrayBuffer 数据了,接下来我们可以直接使用 已经创建并待写入数据的 fsOpen 利用 fs.write() 方法写入数据
let destFile = fs.writeSync(fsOpen.fd, bf);
// 写入完毕后关闭文件,因为在上一步文件在开启中
fs.close(destFile)
此时,文件已经成功写入到了指定的沙箱路径下了哦~
完整代码
let boxPath = this.context.getApplicationContext().filesDir
let unzipPath = boxPath + "/webSources"
let zipPath = boxPath + "/webSources/ohosInteractive.zip"
// 获取rawfile资源文件,转换数据
let uint8Array: Uint8Array = this.context.resourceManager.getRawFileContentSync("zip/ohosInteractive.zip");
let bf = buffer.from(uint8Array).buffer;
// 创建沙箱目录
try {
fs.mkdirSync(unzipPath)
} catch (e) {
}
// 打开文件
const fsOpen = fs.openSync(zipPath, fs.OpenMode.READ_WRITE | fs.OpenMode.READ_ONLY | fs.OpenMode.CREATE | fs.OpenMode.TRUNC)
// 写入文件
let destFile = fs.writeSync(fsOpen.fd, bf);
// 关闭文件
fs.close(destFile)