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安装到非越狱设备。

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

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

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

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

更多文章查看www.httple.net

HBuilder打包App教程相关推荐

js获取微信状态栏高度_人人商城打包app教程方法 hbuilder打包支持支付宝微信原生支付...
使用hbuilder打包人人商城app 方法支持微信支付宝原生支付介绍人人商城打包使用hbuilder打包app需要的文件,目前支持微信原生支付,支付宝原生支付,原生退出app ,还没有写分享和原 ...
【uniapp项目Android离线打包app教程】
[最近打包移动端Android App,看了很多资料教程,整理了一下,送给有缘人 1.下载Android Studio 打包app需要用到Android Studio,如果没有可以先去下载,按提示安装 ...
vue项目（webpack+mintui），使用hbuilder打包app - 小小人儿大大梦想 - 博客园
一.配置config/index.js 本人没有配置index.js文件,就开始进行了打包,结果最终效果是页面空白,解决了空白,接着底部图标(我是用的阿里巴巴图片)资源找不到.所以配置这步比较重要. ...
HBuilder开发App教程01-推开前端开发App的大门
奇妙的前端,奇妙的js 众所周知,自从js有nodejs后,前端人员可以华丽的转身,去开发高并发非阻塞的服务端程序, 随着html5的出现,伴随一些amazing的特性,h5开发app的技术越发的成熟 ...
HBuilder开发App教程06-首页
实战前面几节基本是一些概念的普及, 正如前面提到的,本教程会以滴石作为范例进行讲解, 有兴趣的可以先行下载体验一下,或者下载源码研究下. 新建项目打开HBuilder,在项目管理器中右键--新建- ...
HBuilder打包iOS教程
HBuilder在线打包 1.打开HBuilder工具,选择完工的项目,点击发行,选择发行为原生安装包. 2.选择iOS打包,支持的设备类型(可以选择支持iPhone和支持ipad),选择使用苹果证书 ...
VUE CLI 4.x 打包成APP后白屏解决办法打包APP教程
一般用VUE打包项目后,再把项目打包成APK安装包,在手机上打开应用我们会发现打开是一片白,这是什么原因呢? 路由模式为history模式. 资源的路径不对.默认情况下,Vue CLI 会假设你的应用 ...
HBuilder打包App方法
参考: http://www.cnblogs.com/yizhilin/p/7479166.html 转载于:https://www.cnblogs.com/fanting/p/10521038.ht ...
用hbuilder打包php项目,hbuilder打包人人商城app教程方法支持支付宝微信原生支付...
使用hbuilder打包人人商城app 方法支持微信支付宝原生支付介绍人人商城打包使用hbuilder打包app需要的文件,目前支持微信原生支付,支付宝原生支付,原生退出app ,还没有写分享和原 ...
萝卜源码前后端源码+打包APP的教程
简介: 今天分享一个萝卜源码前后端源码+打包APP的教程我相信很多人都有源码但是不会配置复杂的AS工具导致一直没有打包好属于自己的APP 所以,今天我来了萝卜前端APPJava源码先把源码发出 ...

HBuilder打包App教程

HBuilder打包App教程相关推荐

最新文章

热门文章