使用html+网页混合打包方式,将项目缓存到本地,实现无网状态下依旧能加载出框架

[复制链接]
陈家粉儿Lv.7 显示全部楼层 发表于 2021-12-8 12:32:30 |阅读模式 打印 上一主题 下一主题
苹果上架
使用html+网页混合打包方式,将项目缓存到本地,实现无网状态下依旧能加载出框架

由于网络或者其他原因导致网站无法打开,页面暴露网址,或者无法加载框架,而被判断为是简单的网站打包,从而被应用商店拒绝!
我们需要一种缓存机制将APP的内容缓存进安装包里面,从而让用户在断网的情况下,依旧能看到APP的一些内容,不限于页面框架或者素材,这样可以确保我们APP更加的友好!而不是一个空白页面,或者暴露网址出来!
当然您也可以直接使用前后端分离的前端代码直接打包成APP,我们更加推荐前端代码html打包模式!
html打包模式将会是未来的一个主流方向!


但是还是有很多开发者是直接使用网站URL链接方式打包开发APP的,这种情况下我们可以选择混合打包模式!

1.登录一门app开发者中心,点击新建APP
QQ截图20211208120432.jpg

在开发模式这里我们选择第三个!
QQ截图20211208120520.jpg



2.首页地址设置
这里的首页地址,在有网络的情况下我们可以直接默认选择网站链接!
QQ截图20211208120608.jpg
也可以选择我们的html首页文件
网站链接和html首页文件依次对应第一项的网址和第二项首页文件路径
QQ截图20211208120819.jpg



3.抓取网站链接缓存到本地APK安装包
QQ截图20211208121054.jpg
设置好抓取地址之后,我们点击保存按钮!
这里目前支持抓取5个地址!
QQ截图20211208121200.jpg
之后点击开始抓取!
——目前无网状态下自动替换,只支持APK安装包!
请耐心等待排队抓取!
请耐心等待排队抓取!

专区成功之后,会有页面提示,成功抓取到了多少大小的资源!
这也意味着我们的APK安装包会增大这么多!


4.之后在页面地址点击保存按钮
之后点击左侧的生成安装包,生成新版!
之后安装新版测试,在关闭网络的状态下,依旧能打开您网站的页面框架!
实现更加友好的价值!


5.混合使用资源!
如果您在第二种打包模式里面上传了资源!
您还可以通过  fs://www/ 设置资源访问规则!
  1. 本地资源引用路径为 fs://www/*  (星号 * 为 www 目录下的相对路径);
复制代码
——这需要一定的技术能力,您需要对正则表达式有一定基础!
  1. 编写替换规则,将网络资源路径替换为应用内的本地资源路径;
  2. 从上到下依次匹配,以第一个匹配成功的规则为准,如果应用内本地文件不存在则继续请求网络;
  3. 支持本地路径对网络路径正则表达式的分组(Group)引用,{R:GroupIndex} 中 GroupIndex 为分组索引号;
  4. 示例 .+?\.com/(.*?)\.jpg 替换为 {R:1}.jpg 即表示 {R:1} 引用正则分组 (.*?)
复制代码
我们可以点击页面下方的 配置替换规则
QQ截图20211208122039.jpg
在弹出的规则配置界面,自定义资源访问规则!
QQ截图20211208122128.jpg
这个功能主要实现JS、CSS、图片、音视频等静态资源的本地化
您可以将静态资源在第二种开发模式里面上传,让网站在APP内访问直接加载对应的本地资源
这可以提高网站资源加载速度!



衍生阅读
如何上传静态资源?
QQ截图20211208122435.jpg
进入在线编辑器之后,在页面底部找到上传按钮!
QQ截图20211208122538.jpg
可以静态资源直接上传,上传ZIP之后会自动解压!
之后可以右键文件,获取到资源的本地路径!
QQ截图20211208122715.jpg
我们这里演示的复制路径为:./545/style.css
这个路径是项目内的路径!
我们在网站上需要访问这个本地文件,我们需要加上前缀 fs://www/
那这里需要自行补全路径: fs://www/545/style.css


对比
项目内部地址:./545/style.css
网站上访问地址: fs://www/545/style.css


演示
  1. <link href="fs://www/545/style.css" rel="stylesheet" />
复制代码


回复

使用道具 举报

精彩评论5

周波Lv.8 显示全部楼层 发表于 2022-1-6 10:47:52
安卓上架
QQ截图20220106104516.jpg
目前提供5个链接地址输入;
第一个链接我们建议同打包的首页网页一致;
后面的链接地址,可以根据您项目的页面层级,到每一个层级里面去拿一个URL地址进行输入;


核心要点:
首页+其他4个UI不一样的重要的常用页面;
回复

使用道具 举报

ym286699Lv.7 显示全部楼层 发表于 2022-11-29 12:11:35
<link href="fs://www/545/style.css" rel="stylesheet" />  ?可以使用相对路径嘛?
比如

<link href="fs://../545/style.css" rel="stylesheet" />
回复

使用道具 举报

vioswLv.7 显示全部楼层 发表于 2022-12-6 13:03:34
ym286699 发表于 2022-11-29 12:11
?可以使用相对路径嘛?
比如

不能吧
回复

使用道具 举报

ym108780Lv.1 显示全部楼层 发表于 2023-5-3 11:48:04
为什么我不能发布提问?
回复

使用道具 举报

ym345093Lv.1 显示全部楼层 发表于 2023-9-5 16:08:57
请问打包后的APK使用腾讯安全加固后报错这个怎么解决呢,打包后的扫描有漏洞
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

一门APP打包致力于H5混合APP基础框架领域的前沿探索,专注轻便的移动应用解决方案 提供基于HTML前端页面在各种应用层级的端延展。
  • 官方手机版

  • 微信公众号

  • 微信客服

  • Powered by Discuz! X3.4 | Copyright © 2001-2020, 一门APP. | 一门APP开发平台|热门标签
  • 蜀ICP备17005078号-4 | 川公网安备 51019002001185号 | |成都七扇门科技有限公司