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

Sunxb 发布于2019-08-23 10:44 / 2788人阅读

摘要：前言最近一直有的开发者在问如何打包这本身是属于第三方平台的事既然有开发者在问那我们针对这个问题也想对的打包做个总结本文适用于任何的打包如果你是使用开发的那会更加简单最后会有不同平台的打包效果对比可以下载安装测试的特点想了解更多可以去官网看关

前言

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

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

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

创建一个Webapp工程

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

创建BUI Dcloud 单页工程

下面以创建BUI Dcloud工程为例.

buijs create -p dcloud

-p 之后可以加不同平台, 目前有 bingtouch,dcloud,apicloud,appcan, 加上不同平台以后,工程会有对应打包平台需要的文件.

安装依赖

npm install

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

压缩混淆工程

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

npm run build

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

使用Dcloud打包Webapp 新建一个空白应用

打开Hbuilder编辑器

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

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

在线打包

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

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

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

最终效果预览

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

物理后退及退出提醒

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

打包平台总结

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

Dcloud

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

APICloud

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

Appcan

打包有测试的启动页字样

下载体验总结


BUI Dcloud	BUI APICloud	BUI Appcan

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

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

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

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

idc机房托管云服务器图文教程的图文教程虚拟机图文教程 linux图文教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96638.html

一张脑图看懂BUI Webapp移动快速开发框架【下】--快速入门指引

摘要：例如改成例如改成以上两种开发方式都可以结合原生平台打包成独立应用。继上一篇一张脑图看懂BUI Webapp移动快速开发框架【上】--框架与工具、资源大纲在线查看大纲思路更佳清晰 1. 框架设计框架介绍简介 BUI 是用来快速构建界面交互的UI交互框架, 专注webapp开发, 开发者只需关注业务的开发, 界面的布局及交互交给BUI, 开发出来的应用, 可以嵌入平台 ( Li...

hzx 2019-08-26 10:16 评论0 收藏0
一张脑图看懂BUI Webapp移动快速开发框架【上】--框架与工具、资源

摘要：后续我们还会增加一些实战类的移动开发案例，欢迎关注专栏。进入官网新版预览在线预览需要使用开启设备模拟，效果更佳。前言之前写过一篇 2018开发最快的Webapp框架--BUI交互框架，如果你还没看过，可以简单看一下，主要介绍了BUI的基本功能，有多少控件，以及实现的思路，BUI 1.5版本以后变化很大，统一新的风格，新的规范750，新增基于Dom的数据驱动，完善了页面的生命周期等...

wuyumin 2019-08-26 10:16 评论0 收藏0
好快, 1分钟开发好一个下拉刷新,滚动加载列表

摘要：但本活又己交给音长争标识我。八说前它特用达圆是路看江才。开次他争从点军容给油很出。成育料技所心并精北酸间办元。除现七团一历积动两水矿花始线党党她。好快, 1分钟写好下拉刷新,滚动加载自动分页列表前言欢迎关注BUI Webapp专栏或者 bui神速微信公众号. 以往文章: 2019开发最快的Webapp框架--BUI交互框架微信Webapp开发的各种变态路由需求及解决办法! ...

wemall 2019-08-30 15:56 评论0 收藏0
好快, 1分钟开发好一个下拉刷新,滚动加载列表

摘要：但本活又己交给音长争标识我。八说前它特用达圆是路看江才。开次他争从点军容给油很出。成育料技所心并精北酸间办元。除现七团一历积动两水矿花始线党党她。好快, 1分钟写好下拉刷新,滚动加载自动分页列表前言欢迎关注BUI Webapp专栏或者 bui神速微信公众号. 以往文章: 2019开发最快的Webapp框架--BUI交互框架微信Webapp开发的各种变态路由需求及解决办法! ...

468122151 2019-08-30 15:44 评论0 收藏0