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→→运行→→手机运行→→连接上真机。

HBuilder打包App方法的更多相关文章

  1. 【原创分享·支付宝支付】HBuilder打包APP调用支付宝客户端支付

    前言 最近有点空余时间,所以,就研究了一下APP支付.前面很早就搞完APP的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还 ...

  2. springboot+layui实现PC端用户的增删改查 & 整合mui实现app端的自动登录和用户的上拉加载 & HBuilder打包app并在手机端下载安装

    springboot整合web开发的各个组件在前面已经有详细的介绍,下面是用springboot整合layui实现了基本的增删改查. 同时在学习mui开发app,也就用mui实现了一个简单的自动登录和 ...

  3. hbuilder打包app基本流程

    声明:本文可能用到一些工具和第三方网站,都是为了达到目的而使用的工具,绝不含有广告成分 1.下载.最新的Hbuilder X貌似不能直接创建移动app了(自己不会用),建议旧版.可去腾某讯软件中心下载 ...

  4. HBuilder打包app(vue项目)

    一.测试项目是否可以正确运行    指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 不必非得是像我这样的,这一步的目的只是测试一下咱们的 ...

  5. HBuilder打包App流程记录

    摘要:基于HBuilder建立一个简单的移动app项目,并打包成apk,使用这套平台用H5开发真正的移动项目,相当于省去了原生部分的人力和工作配合,性能的话,后续我会基于这套技术开发相关的应用来验证, ...

  6. 使用Hbuilder打包app

    使用Hbuilder来打包自己的H5项目 第一步 在Hbuilder上新建一个"移动APP"wolf(项目命名随意)(如果没用引用mui框架的东西,"选择模板" ...

  7. vue项目 使用Hbuilder打包app 设置沉浸式状态栏

    使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusb ...

  8. hbuilder 打包app简易教程

    1. 新建app 2. 新建弹窗面板中选择MUi登录模版 ps:在弹出的窗口,填入应用名称,根据需求选择项目位置,以及模板内容. 3. 检验app效果 菜单栏 -> 运行 -> 手机运行 ...

  9. vue 用huilder打包APP时,安卓按返回键就退出App改为按两次再退出App

    做vue项目时,用Hbuilder打包APP,在安卓下按返回键就是退出了APP,百度了下.都是使用到MUI来解决的,自己也记录下. 在main.js里面引入mui.js并使用. import mui ...

随机推荐

  1. TypeScript--变量及类型的那些事儿

    变量(类型)声明 格式:关键字  变量名称:类型=值 (强类型)     /   关键字  变量名称=值 例子: Array数组声明   Tuple元组类型 声明一个包含多类型的数组: Enum枚举类 ...

  2. 【JAVASCRIPT】React入门学习-文本渲染

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 文本渲染 1. 纯文本渲染 <!DOCTYPE html> <html> <head&g ...

  3. git中使用命令将远程仓库拉取项目在本地文件夹

    在有些时候,我们往往从github或者gitlab或者coding上面直接下载项目下来运行,但是这种情况往往没有使用git远程拉取来的安全(或者叫装逼), 所以这里我以gitLab为例子,说一下如何将 ...

  4. RabbitMQ入门-消息派发那些事儿

    在上篇<RabbitMQ-高效的Work模式>中,我们了解了Work模型,该模型包括一个生产者,一个消息队列和多个消费者. 我们已经通过实例看出消息队列中的消息是如何被一个或者多个消费者消 ...

  5. 使用VS Code开发.Net Core 2.0 MVC Web应用程序教程之二

    好了,废话也不多说,咱们直接来看看这款MVC的造型——你可能会大吼:“这……这特么的都是些什么鬼?” 靠,告诉你吧,我也不知道这都是些什么鬼,反正以前我是没有见过这样的MVC.咦,老纸的config文 ...

  6. IMPEX

    1.Impex是基于java Model的一种面向对象的数据操作手段,因此写impex代码前需要理清java Model之间的依赖关系. 2.基本语法:mode type[modifier=value ...

  7. mybatis 详解(五)------动态SQL

    前面几篇博客我们通过实例讲解了用mybatis对一张表进行的CRUD操作,但是我们发现写的 SQL 语句都比较简单,如果有比较复杂的业务,我们需要写复杂的 SQL 语句,往往需要拼接,而拼接 SQL ...

  8. 用Python处理实验数据

    开篇语 近来忙于考试以及应付专业课,基本很少写简书了.昨晚攻坚了三个学生工作的任务(妈妈的吻.好久没有这么疯狂工作了.还是很爽的哦!) 今天难得清静,虽然上课还是沉浸于完成任务的放纵式玩手机中,但是也 ...

  9. VS2013+MFC串口控件的简单上位机

    因为做东西,正好用到这里.所以就上传了文件分享一下. 利用VS带的MFC库,用起来还是比较方便的.空间的程序构架都是自动生成的,具体的程序自己加进去就行. 里面有整个的工程 还带有一个生成的EXE文件 ...

  10. 最新 Zookeeper + Flume + Kafka 简易整合教程

    在大数据领域有很多耳熟能详的框架,今天要介绍的就是 zookeeper.flume.kafka.因为平时是做数据接入的,所以对这些实时的数据处理系统不是很熟悉.通过官网的简要介绍,搭建了一套简要的平台 ...