当前位置: 代码迷 >> 综合 >> WebApp,BUIApp 结合Dcloud平台(HBuilder) 打包
  详细解决方案

WebApp,BUIApp 结合Dcloud平台(HBuilder) 打包

热度:48   发布时间:2023-12-02 05:59:13.0

Web App如何打包?

本文适用于任何的H5打包, 如果你是使用BUI开发的Webapp, 那会更加简单。

最后会有不同平台的打包效果对比, 可以下载安装测试.

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

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

首先你已经创建好一个WebApp工程,下面的只仅仅介绍如何打包:

创建BUI Dcloud 单页工程

buijs create -p dcloud

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

重点:加上不同平台以后,工程会有【对应打包平台】需要的文件

压缩混淆工程

npm run build

复制dist目录里面的所有文件
这里写图片描述

使用Dcloud打包Webapp

新建一个空白应用

打开Hbuilder编辑器
这里写图片描述

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

这里写图片描述

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

在线打包

在工程上右键–>发行–>云打包-打原生安装包
这里写图片描述
安卓默认使用Dcloud提供的证书测试就可以了,直接点打包就可以排队.
这里写图片描述
点确定查看打包状态, 稍作等待.
这里写图片描述

最终效果预览

这里写图片描述
可通过QQ发送到手机进行安装测试

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

物理后退及退出提醒

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

打包平台总结

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

  • Dcloud

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

  • APICloud

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

  • Appcan

    打包有测试的启动页字样

借鉴地址:webapp结合Dcloud平台打包图文教程