网站模板设计教程,招聘网络推广专员,深圳建站的公司,给网站做绝对路径关键词#xff1a;h5离线包加载、h5离线包更新、沙箱
在上一篇文章中#xff0c;我们已经介绍了如何将 rawfile 资源文件中的文件数据拷贝到沙箱下#xff0c;那么该篇文章将介绍如何加载该沙箱目录下的文件资源#xff08;此处以打包后的web资源为例#xff09;#xf…关键词h5离线包加载、h5离线包更新、沙箱
在上一篇文章中我们已经介绍了如何将 rawfile 资源文件中的文件数据拷贝到沙箱下那么该篇文章将介绍如何加载该沙箱目录下的文件资源此处以打包后的web资源为例用webview加载出页面并实现在线获取新包更新web页面的效果。 如何将rawfile中文件拷贝到沙箱中可参考我的上一篇文章HarmonyOS/OpenHarmony 如何将rawfile中文件复制到沙箱中 该片文章首先需要介绍我这边准备的 ohosInteractive.zip 离线包该离线包中仅存放了一个简易的html文件 1. 解压文件
解压zip文件到 webSources 下因为涉及到文件加载需要一段时间所以此处的解压建议放到ability生命周期中进行不建议在页面需要加载时进行解压。
let boxPath getContext().getApplicationContext().filesDir
let unzipPath boxPath /webSources
let zipPath boxPath /webSources/ohosInteractive.zipzlib.decompressFile(zipPath, unzipPath, {}, (err, data) {if (err ! null) {console.error(err.message)} else {console.log(luvi decompress succeed)fs.unlinkSync(zipPath);}})
2. webview 加载页面
此处的 webUrl 是我们在上一步解压后的文件所在位置不要写错了。因为当前 web 为加载沙箱文件所以需要开启 fileAccess 属性不然 h5 将无法加载。
当文件解压完后页面就会加载出来了若不能加载可连接设备点击 IDE 右下角的 Device File Browser 文件管理查看文件拷贝和解压是否正确有些页面需要设置 domStorageAccess 属性才可以加载此处也不能遗忘。
Entry
Component
export struct WebPage {webController: WebviewController new webview.WebviewController()webUrl: string file:// getContext().getApplicationContext().filesDir /webSources/index.html;build() {Column() {Web({ src: this.webUrl, controller: this.webController }).fileAccess(true).domStorageAccess(true).zoomAccess(false).width(100%).height(100%)}}
}
3. h5离线包更新
在第一步时我们就已经把文件管理在了沙箱中沙箱中的文件我们可以进行任意操作如删除或替换那么我们可以利用该特性进行资源包的在线下载并解压替换即可实现h5页面的更新。
该 updateResources 方法自行修改按业务调用即可此处需要注意的是在app中本地 rawfile 已经存在离线包拷贝解压后需要进行标记或自行检查文件的存在与否避免在线的离线包下载替换完成后下次启动app再一次把 rawfile 中的文件拷贝到了沙箱中那么最新的在线包始终不会被更新进沙箱。
3.1 使用 request.downloadFile 下载离线包并解压
updateResources() {// 下载最新离线包let boxPath getContext().getApplicationContext().filesDirlet unzipPath boxPath /webSourceslet zipPath boxPath /webSources/ohosInteractive.ziptry {// 需要手动将 url 替换为真实服务器的 HTTP 协议地址此处我就不给我的服务器了request.downloadFile(getContext(), {url: https://xxxxxx/ohosInteractive.zip,filePath: zipPath}).then((data: request.DownloadTask) {let downloadTask: request.DownloadTask data;downloadTask.on(complete, () {// 解压下载的新资源包zlib.decompressFile(zipPath, unzipPath, {}, (err, data) {if (err ! null) {console.error(luvi err.message)} else {console.log(luvi decompress succeed)// 解压成功后删除源zip包fs.unlinkSync(zipPath);}})console.log(luvi 新离线包下载成功)promptAction.showToast({message: luvi 新离线包下载成功重启展示新页面})})}).catch((err: BusinessError) {console.error(luvi Failed to request the download. Code: ${err.code}, message: ${err.message});})} catch (err) {console.error(luvi Failed to request the download. err: ${JSON.stringify(err)});}} 师傅领进门修行靠个人本文章只介绍核心功能因业务功能而异所以不提供完整代码了。
