1.下载HbuilderX之后新建项目

2.在这里选则你需要新建的项目类型，本人打包的是h5app，选的5+app



3.选择好项目本地存放的地址，编写项目名，之后点击创建

4.打开刚刚创建的那个项目，点击打开manifest.json，就是下图这样子



5.填写你的h5项目地址

6.基本配置（看图），太简单太多自己研究



7.SDK配置里可以配置你的项目的appid、key其他配置，比如你的项目需要获取定位，就去申请定位key之后打包的时候再来这里填写

8.把你的配置都填写好之后点击发行——云打包

9.看图看图

10.点击打包之后会显示正在云打包，并打开hbuilder的控制台，如下图

11.打包完成之后会给你一个链接，点击下载就行了，下载出来的是安装包 安装到手机上打开就行了

当app开发完成后，想将自己的劳动成果的喜悦分享给其他人，这个时候即需要打包app，同时给app打标签，完成这些你的app便可以供其他人安装。
打包步骤如下（以Android studio3.2 为例）
①找到状态栏 build - >  Generate Signed Bundle/APK…

②选择APK,然后Next

③如果有已经有key可以直接Next 或者Choose  existing

如果没有key则Create new,创建一个，创建的时候两个密码尽量设置一样，避免忘记，别名设置为key或者容易记得的别名或者代号，期限25年足矣，其他可自由填写。

④下一步选择app的储存地址、构建类型、标签版本。Build Type 选择 release类型，Signature Versions 选择 V2.

⑤在相应的储存地址，打包的apk已经生成
（默认存放在项目文件夹内app下的release中）

使用HBuilder打包App教程(图文教程)
1:新建app,或者打开“文件 - 新建 - 移动APP”



2:然后填写应用名称以及位置,默认空模板完成



3:默认生成以下文件,把除了unpackage和manifest.json以外的都删掉



4:把自己的项目文件全部放进来


5:双击打开manifest.json文件,页面入口默认是index.html,你可以把自己的首页改成index或者点选择选中.



6:在下面选择图标设置,点击+号选择你的app图标必须是.png格式的,选好后点击自动生成所有图标并替换


7:启动图片,启动选项默认就好



8:在unpackage下的res下新建个文件夹取名splash,把我们的app启动图片放进去(注意同样是.png格式的且注意尺寸大小)


9:选择相对应的尺寸大小的启动图片



10:SDK配置：工具自己的需要配置，没有就默认就行。

11:模块权限配置:一样有需要就配置，没有就默认就行。(报黄报红的要删掉)



12:页面引用关系,点击确定



13:点击发行 - 发行为原生安装包



14:选择好后点击打包




15:点击确认就完成了.



16:看下效果,点击手动下载



17:我直接在虚拟器上安装了,懒的发送到手机了



启动画面



app里面的效果

电脑上的效果

HBuilder打包App方法



HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。该软件既可以支持web代码编写，也可以将已经编写好的项目代码打包为手机APP。

HBuilder提供的打包有云端打包和本地打包两种，云端打包的特点是DCloud官方配置好了原生的打包环境，可以把HTML等文件编译为原生安装包。

 

1，下载HBuilder，注册并登陆。首先打开“文件”-“新建”-“移动APP”，输入“应用名称”，“位置”可以根据需要自己选择即可，“选择模板”建议选择空模板；







2，新建完成后， 在项目管理器会显示新建的项目目录，其中css，img，js和index.html这几个文件可删可改可替换。

unpackage文件夹是放置app图标和启动界面的图片。

manifest.json文件是移动App的配置文件，用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息，用户可通过HBuilder的可视化界面视图或者源码视图来配置移动App的信息。





3，如果删除了css，img，js文件夹和index.html文件，就把其他自己的项目文件对应复制到文件夹中，注意html文件中的引用路径需要保持正确。

如下图自己拷贝的项目：





4， 文件复制完成后，刷新更新下，双击打开manifest.json文件来配置App。

appid：点击云端获取。版本号：根据需要来编辑。页面入口：默认是index.html，根据自己项目需要，更改APP的启动页面。应用描述：自己随便填。应用是否全屏显示：勾上就全屏显示。









5，图标配置：点击页面下方的图标配置，配置APP显示图标。

1)点击"+"号的正方形方框，选择图标素材的路径找到图标素材，再点击" 自动生成所有图标并替换"按钮，完成图标生成和替换。





2),生成的图标自动在unpackage文件夹下









6，启动图片（splash）配置，点击切换到启动图片配置

1)，启动选项：默认

2)，启动图片设置，根据自己需要是Android还是iOS平台，再根据不同设备对应做出启动图片


3），在unpackage→res文件下新建个文件命名"splash"，把做好的启动图片放到这个文件里面。





4），在启动图片设置里点击"选择"，找到刚放进来的启动图片









7，SDK配置：有需要就配置，没有就默认就行。

8，模块权限配置：有需要就配置，没有就默认就行。

9，页面引用关系：

首先点击“扫描代码”，再点击左边index.html文件

该功能是什么意思：点击左侧html文件，右侧会显示不同的文件，图片等。可以表示左侧html文件加载时所需要的资源。











10，代码视图：在代码视图里查看设置是否正确，确定后ctrl+s保存好。

11，设置好配置选项，正式进入打包阶段

HBuilder里点："发行"-"发行为原生安装包"开始打包







这里介绍一下iOS打包

1），这里如果选择越狱包就不需要苹果证书，一路默认设置就可以打包成功，但是打包的App只能安装在越狱过的手机，没越狱安装不了。

2），如果使用苹果证书，这里推荐一个申请iOS证书的工具 Appuploader。免苹果付费开发者账号，直接使用普通苹果id，就能使用Appuploader申请ios测试证书，打包ipa安装到非越狱设备。

工具的安装网址：http://www.applicationloader.net/blog/zh/72.html

免开发者账号申请iOS证书教程：http://www.applicationloader.net/blog/zh/1073.html



12，提交成功后点击确定，就可以查看App打包状态









等打包成功，就可以点手动下载，通过第三方工具 苹果助手安装到ipad上了。









13，调试和安装模拟器

如果你需要在电脑本机进行调试那就需要安装模拟器，请参考http://ask.dcloud.net.cn/article/151如何安装配置手机模拟器，或者在HBuilder里→→运行→→手机运行→→如何安装配置手机模拟器进入查看。

如果需要安装到手机进行真机调试，把手机用数据线连接到电脑，然后重新启动HBuilder→→运行→→手机运行→→连接上真机。