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

以上这篇HBuilder打包App方法(图文教程)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Hbuilder配置Avalon和Vue指令提示的方法详解

    前言 本人是一名JAVA后端开发,偶尔也会研究一下前端内容,因为Hbuilder是基于eclipse开发的,所以用起来倍感亲切啊,而且在我尝试使用的几款前端开发工具中,Hbuilder的表现也是相当出色地,可以访问Huilder官网下载体验一下. 言归正传,当前前端的开发中,MVVM框架非常流行,比较典型的如:AngularJS.VueJS等,这部分框架基本都有一个指令的概念,在工具中配置相关的提示,可以极大地方便的我们的开发,下面就来介绍一下如何在Hbuilder中进行配置,话不多说了,来一起

  • HBuilder打包App方法(图文教程)

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP. HBuilder提供的打包有云端打包和本地打包两种,云端打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包. 1,下载HBuilder,注册并登陆.首先打开"文件"-"新建"-"移动APP",输入"应用名称","位置

  • vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法

    使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusbar": { "immersed": true }, ...... }, ..... 效果 总结 以上所述是小编给大家介绍的vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大

  • WebStorm安装配置方法图文教程

    本文为大家分享了WebStorm安装配置方法图文教程,供大家参考 ★★★ 特别推荐:最新WebStorm2020.2注册码永久激活(激活到2089年) 一.简介 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为"Web前端开发神器"."最强大的HTML5编辑器"."最智能的JavaScript IDE"等. 二.安装 官网地址:http://www.jetbrains.com/websto

  • mysql 5.7.13 安装配置方法图文教程(win10 64位)

    本文实例为大家分享了mysql 5.7.13 winx64安装配置方法图文教程,供大家参考,具体内容如下 (1) 下载MySQL程序,您可以从MySQL官网上下载,或者点击这里下载 (2) 解压mysql-5.7.13-winx64.zip文件到你想安装的目录,我的例子是 D:\program\mysql-5.7.13-winx64.其中的目录结构如下: 文件夹:bin docs include lib share 文件: COPYING README my-default.ini (3) 拷贝

  • Tomcat安装配置方法图文教程

    用来进行web开发的工具有很多,Tomcat是其中一个开源的且免费的java Web服务器,是Apache软件基金会的项目.电脑上安装配置Tomcat的方法和java有些相同,不过首先需要配置好java的环境才行,点击此文查看:java环境变量如何配置. 接下来安装配置Tomcat: 1.下载Tomcat文件,文件是一个exe的安装文件,下载后直接安装即可. 下载地址在百度输入Tomcat进入官网即可找到下载文件.安装文件没有什么技巧,一直点击下一步即可. 2.同样安装时注意安装目录,因为一会要

  • Eclipse中导出码云上的项目方法(图文教程)

    1.菜单栏File里的import. 2.Git 3.输入码云上的地址 4.选择本地创库位置 5.再次引入本地maven项目 6.选择本地存在的创库位置,勾选上add set 以上这篇Eclipse中导出码云上的项目方法(图文教程)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Windows Sever 2012下Oracle 12c安装配置方法图文教程

    分享Oracle 12c安装配置方法图文教程,具体内容如下 1.我们开启虚拟机 2.Windows Sever 2012启动中. 3.看到Windows Sever 2012的桌面. 4.我们解压缩两个文件,winx64_12c_database_1of2.zip,winx64_12c_database_2of2.zip.也就是oracle的安装文件. 5.这个时候我们可以看到服务器启动以后的仪表板. 6.然后我们合并两个解压缩以后文件夹的内容,进行合并.可以查看大小2G多. 7.我们可以看到合

  • mysql 5.7.15 安装配置方法图文教程(windows)

    因本人需要需要安装MySQL,现将安装过程记录如下,在自己记录的同时,希望对有疑问的人有所帮助. 一.下载软件 1. 进入mysql官网,登陆自己的oracle账号(没有账号的自己注册一个),下载Mysql-5.7.15,下载地址:http://dev.mysql.com/downloads/mysql/ 2.将下载好的文件解压到指定目录,笔者解压在D:\mysql-5.7.15-winx64 二. 安装过程 1.首先配置环境变量path,将D:\mysql-5.7.15-winx64\bin配

  • mysql 5.7.17 winx64.zip安装配置方法图文教程

    前言:重装win10顺带整理文件,然而装个MySQL用了我一下午,真是不值,所以写这篇来帮助大家. 参考链接:mysql 5.7.11 winx64.zip安装配置方法图文教程: 里面有些步骤在我这弄完,一直是错的,我会适当点出,希望对你有帮助. 一.下载 https://dev.mysql.com/downloads/mysql/ 二.解压缩zip包 三.配置环境变量 (1)配置Path (2)修改mysql-default.ini配置文件原先的: # These are commonly s

  • mysql 5.7.13 winx64安装配置方法图文教程(win10)

    本文实例为大家分享了mysql 5.7.13 winx64安装配置方法图文教程,供大家参考,具体内容如下 下载 地址:http://dev.mysql.com/downloads/file/?id=463242 安装 1.解压下载好的mysql-5.7.13-winx64.zip到你需要安转的目录(eg:D:\mysql): 2.配置解压目录下的my_default.ini中命名为my.ini 作相关的配置如下: # These are commonly set, remove the # an

随机推荐