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方法(图文教程)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程小技巧。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


一:HBuilder打包https://jingyan.baidu.com/article/e3c78d648961303c4c85f539.html 二:不当的退出会造成GoogleChrome无法启动。出现“GoogleChrome未响应。是否立即重新启动?”的错误。要解决这个问题:1、同时按住Windows旗帜键+R键,调出Windows的“运行”窗口2、输入CMD
如何将H5和WebApp加壳成apk、ipa  问题:已经做好的纯H5的站点想分别加两个壳子,变成apk和ipa,要怎么实现?要点:1.app只是壳子,打开app直接跳转到H5的Url,需要支持修改url      2.app图标需要修改成自己设计的,需要支持图标替换原理:Hbuilder工具支持创
史上最全最实用HBuilder快捷键大全 一、文件操作二、编辑操作三、插入操作四、转义操作五、选择操作六、跳转操作七、查找操作八、运行九、视图一、文件操作新建菜单:ctrl+N新建:ctrl+N关闭:ctrl+w全部关闭:ctrl+shift+w保存:ctrl+s全部保存:ctrl+shift+s刷新:
常用模拟器的端口夜神模拟器端口号:62001海马玩模拟器端口号:26944网易mumu模拟器端口号:7555天天模拟器端口号:6555AndroidStudio自带模拟器端口号:5554连接步骤打开cmd命令命令行里进入HBuilder\tools的目录按住Shift+右键,选择打开命令行工具(powerShell)执行
---恢复内容开始---     ---恢复内容结束---
http://ask.dcloud.net.cn/question/28090后台自动运行,定期记录定位数据分类:HTML5+ 各位新年好小弟以前用hbuilder开发过几个项目,现在有一新需求项目,在考虑是否使用它来实现:需要APP在后台能定期离线监控用户定位数据,使用的是百度地图,我已经知道可以离线获取定位信息,但
经上一步完成Hbuilder、HbuilderX与夜神模拟器的安装,本次介绍下两者之间的连接设置。1.三者的安装路径Hbuilder:E:\SAPUI5\HBuilderHbuilderX:D:\ProgramFiles\HBuilderX夜神:D:\ProgramFiles\Nox2.Hbuilder与夜神连接Hbuilder主要用于构建快速APP2.1夜神设置
HBuilder打包流程01.manifest.json添加Oauth授权工具 02.执行APP云打包,打开窗口,下图的配置非常非常重要,一个都不能错。一定要选择“使用自有证书”包名:填写应用的包名称,格式如:io.dcloud.wxe(.wxe可以自己拟定名称)证书别名、私钥密码、证书文件这三个内容分别看下面的生成步
有时候发现自己电脑内存不是很大如果用webstorm跑项目会很卡的话可以试试轻量级HBuilder来跑VUE项目VUE项目又需要执行NPM,下面教你怎么在HBuilder中使用NPM1.首先在HBuilder上面找到运行2.进入到外部工具——>外部工具配置3.输入要执行的命令或文件:C:\Windows\Syste
mui.openWindow("A.html")打开新页面createNew参数为true情况下,会一直创建新的webview,时间长的话APP会卡死只要未关闭过A.html,就不会进入plusReady中,如果关闭过A.html,就会进入plusReady中。所以关键是判断是否有关闭过该页面,从而考虑业务逻辑是放在plusReady中,还是自定义事件
随着互联网基础设施建设的发展,4G/5G/NB-IoT各种网络技术的大规模商用,视频随时随地可看、可控的诉求越来越多,互联网思维、架构和技术引入进传统监控行业里,成为新形势下全终端监控的基础需求。因使用区域受限、实施成本和入口门槛高,传统监控行业和摄像机直播系统无法借力优质云资源
uni-app开发微信小程序1.配置开发环境uni-app基于Hbuilder、微信开发者工具开发下载链接:https://www.dcloud.io/https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html全部安装好后,首先配置Hbuilder文件-新建-项目选择uni-app后填写项目名
使用uniapp之后,就自然而然的用上了HBuilderX编辑器,今天突然发现,我的光标和以前不一样了,没错,就是下面的这个样子,
  1.解决方案找到项目工程文件右击->显示包内容->双击project.pbxproj->搜索distribution改写成Developer  
hx支持多光标,按ctrl+鼠标左键就可增加一个光标,ctrl+鼠标右键可取消一个光标或选区。光标放到某api处,按下F1,就可跳转到这个api的官方手册。目前支持vue、uni-app、5+等apihx的代码助手,可以按alt+数字选择直接选择某个项目,类似中文输入法数字选词ctrl+e(mac是cmd+d
现在css预编译越来越普及了,著名的有less、sass、stylus等等等等。功能上基本上都是大同小异。这些主要表达的意思就是:“像编程一样的编写你的css”。我在群里面看到好多的网友都是用koala这个工具编译less,但普遍反映很麻烦。下面小编给大家介绍两个IDE工具,它们都能解析less,关
目录一.创建简单app应用 二.MUI 各组件的运用 三.HTML5plus四.事件 五.窗口管理 六.登录页面(前后端分离)一.创建简单app应用第一步第二步第三步链接手机  第四步   二.MUI 各组件的运用http://dev.dcloud.net.cn/mui/snippet/三.HTML5
如果是本地导入js文件,那么打开mui.min.js.在文件中搜索如下语句:f)break}}),b.addEventListener("click"改成:f)break}},{passive:false}),b.addEventListener("click"
安装scss/sass编译插件如果本地安装了nodejs,版本不一样可能会出错。工具->插件安装->scss/sass编译插件1405576-20190404093045162-498834772.png将sass编译成css新建scss文件,编写完成后,(右键scss文件->外部命令/插件->sass->编译scss/sass),即可编译成功,默认
这个项目用了Hbuilder,我决定不再用,奉劝大家也别用了,暴脾气的我给气的半死,真的太垃圾了,少的可怜的维护,怪我选错方向。。。Flutter才是正道。。。。。起码有谷歌大哥来维护。。。真的我现在好气后期的维护太费劲。。想死的心都有了,妈耶,好难受