webapp结合Dcloud平台打包图文教程

王小o

前言

最近一直有BUI Webapp的开发者在问, webapp如何打包? 这本身是属于第三方平台的事, 既然有开发者在问, 那我们针对这个问题, 也想对Webapp的打包做个总结, 本文适用于任何的H5打包, 如果你是使用BUI开发的Webapp, 那会更加简单. 最后会有不同平台的打包效果对比, 可以下载安装测试.

BUI Webapp的特点. 想了解更多,可以去BUI官网看.

BUI Webapp特点

关于Cordova的打包教程,可以看另外一位群友@伊何底止丶的文章.
Cordova项目中使用BUI框架打包及常见解答

创建一个Webapp工程

buijs 是BUI用来快速构建工程及模板的工具. 如果不想安装,可以直接下载BUI demo工程

创建BUI Dcloud 单页工程

下面以创建BUI Dcloud工程为例.
buijs create -p dcloud
-p 之后可以加不同平台, 目前有 bingtouch,dcloud,apicloud,appcan, 加上不同平台以后,工程会有对应打包平台需要的文件.

BUI 创建Dcloud工程

安装依赖

npm install
如果较慢,也可以使用cnpm.

npm-install

压缩混淆工程

生成dist目录,这个目录就是我们要拿来打包的,会对源码做压缩混淆.

npm run build

BUI 编译混淆

复制dist目录里面的所有文件

复制dist目录

使用Dcloud打包Webapp

新建一个空白应用

打开Hbuilder编辑器

新建一个空白应用

复制的dist工程覆盖空白应用工程

工程

在Dcloud工程上右键粘贴, 选择全覆盖.

在线打包

工程

在工程上右键-->发行-->发行为原生安装包

配置

安卓默认使用Dcloud提供的证书测试就可以了,直接点打包就可以排队.

打包提醒

点确定查看打包状态, 稍作等待.

打包成功

最终效果预览

下载官网demo打包后的预览, 如果是创建的工程,是一个只有简单页面的效果.

back

物理后退及退出提醒

注意: 如果你要绑定物理后退按键, 在执行 npm run build打包之前,先打开 index.js 里面有个注释, 去掉注释就行(直接下载的demo为webapp,没有这块的处理).

BUI index.js

打包平台总结

每个平台的打包方式都是类似,都有自己的对应工具, 只要按这个过程来就可以的.

Dcloud

目前免费打包需要排队,功能没有限制,已经很不错 强烈推荐

APICloud

免费用户的应用有数量限制,其它整个操作的流程及体验都还可以.

Appcan

打包有测试的启动页字样

下载体验总结

BUI DcloudBUI APICloudBUI Appcan
BUI DcloudBUI APICloudBUI Appcan

基于相同工程在不同平台上的打包体验. 以下是我在魅蓝 note6 的测试体验. 大家可以试试你们的结果是不是也这样?

打开速度方面: Dcloud > Apicloud > Appcan
明显打开的启动页都不用停留很久,这个都是默认配置打包,不知道是否有时间配置的缘故.

页面切换方面: Dcloud >= Apicloud >= Appcan
由于都是采用的一样的路由,页面切换速度基本保持一致的速度,在我的机型里,感觉Dcloud会略胜一筹.

效果体验方面: Dcloud == Apicloud == Appcan
不同平台的打包结果在不同机型的适配,都是保持一致的交互,一致的效果.

2020年12月更新

IOS打包问题

很多平台的IOS打包,默认不支持本地文件跨域, 单页开发会面临找不到.html文件的问题, 需要把请求转换为原生请求.

  1. 在index.js 加入
bui.isWebapp = false;
  1. 在index.js 加入以下配置, 请求转换为原生.
// 模块的请求转换为原生请求
window.loader = bui.loader({ needNative:true });
// 数据请求转换为原生请求
bui.config.ajax = { needNative:true };
// 列表控件转换为原生请求
bui.config.list = { needNative:true };

如果报找不到 loader错误, `
window.loader = bui.loader({ needNative:true }); 这行文件要提取到 index.html <script src="js/bui.js"></script>`的引入下面.

index.html

<script src="js/bui.js"></script>
<script>
window.loader = bui.loader({ needNative:true });
</script>
阅读 6.5k

BUI WebApp开发框架
欢迎关注&gt;bui神速

BUI专注webapp快速开发

311 声望
59 粉丝
0 条评论

BUI专注webapp快速开发

311 声望
59 粉丝
文章目录
宣传栏