使用Hbuilder构建跨平台的移动app

安装Hbuilder软件，这里不多介绍了。软件下载地址

下载好之后我们还要准备好自己要打包的项目。

一、安装Hbuilder

二、打开Hbuilder

选中红色区域内新建项目

会弹出如下界面

填好名称和路径然后点击创建。创建好之后项目的目录结构如下

三、编辑好项目代码

整理好需要打包的项目代码。主要为了测试打包。简单的测试代码

四、进行manifest.json配置

基础配置

图标配置

点击自动生成所有图标并替换就会生成下面所有的图标。也可以自己制作对应的图片

启动图配置

下面的图片尺寸大小需要自己设计好。延时按照要求设置对应的数值就可以。

SDK配置

这个地方根据自己的需求去配置相应的值。

模块权限配置

配置软件获取的系统权限

源码视图

主要查看上面的配置的json文件。如下：

{"@platforms" : [ "android", "iPhone", "iPad" ],"id" : "H590E31E9", /*应用的标识*/"name" : "my_demo", /*应用名称，程序桌面图标名称*/"version" : {"name" : "1.0", /*应用版本名称*/"code" : 1},"description" : "第一个测试的app", /*应用描述信息*/"icons" : {"72" : "icon.png"},"launch_path" : "index.html", /*应用的入口页面，默认为根目录下的index.html；支持网络地址，必须以http://或https://开头*/"developer" : {"name" : "", /*开发者名称*/"email" : "", /*开发者邮箱地址*/"url" : "" /*开发者个人主页地址*/},"permissions" : {"Accelerometer" : {"description" : "访问加速度感应器"},"Audio" : {"description" : "访问麦克风"},"Messaging" : {"description" : "短彩邮件插件"},"Cache" : {"description" : "管理应用缓存"},"Camera" : {"description" : "访问摄像头"},"Console" : {"description" : "跟踪调试输出日志"},"Contacts" : {"description" : "访问系统联系人信息"},"Device" : {"description" : "访问设备信息"},"Downloader" : {"description" : "文件下载管理"},"Events" : {"description" : "应用扩展事件"},"File" : {"description" : "访问本地文件系统"},"Gallery" : {"description" : "访问系统相册"},"Geolocation" : {"description" : "访问位置信息"},"Invocation" : {"description" : "使用Native.js能力"},"Orientation" : {"description" : "访问方向感应器"},"Proximity" : {"description" : "访问距离感应器"},"Storage" : {"description" : "管理应用本地数据"},"Uploader" : {"description" : "管理文件上传任务"},"Runtime" : {"description" : "访问运行期环境"},"XMLHttpRequest" : {"description" : "跨域网络访问"},"Zip" : {"description" : "文件压缩与解压缩"},"Barcode" : {"description" : "管理二维码扫描插件"},"Maps" : {"description" : "管理地图插件"},"Speech" : {"description" : "管理语音识别插件"},"Webview" : {"description" : "窗口管理"},"NativeUI" : {"description" : "原生UI控件"},"Navigator" : {"description" : "浏览器信息"},"NativeObj" : {"description" : "原生对象"}},"plus" : {"splashscreen" : {"autoclose" : true, /*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/"waiting" : true, /*是否在程序启动界面显示等待雪花，true表示显示，false表示不显示。*/"delay" : 3000},"popGesture" : "close", /*设置应用默认侧滑返回关闭Webview窗口，"none"为无侧滑返回功能，"hide"为侧滑隐藏Webview窗口。参考http://ask.dcloud.net.cn/article/102*/"runmode" : "normal", /*应用的首次启动运行模式，可取liberate或normal，liberate模式在第一次启动时将解压应用资源（Android平台File API才可正常访问_www目录）*/"signature" : "Sk9JTiBVUyBtYWlsdG86aHIyMDEzQGRjbG91ZC5pbw==", /*可选，保留给应用签名，暂不使用*/"distribute" : {"apple" : {"appid" : "", /*iOS应用标识，苹果开发网站申请的appid，如io.dcloud.HelloH5*/"mobileprovision" : "", /*iOS应用打包配置文件*/"password" : "", /*iOS应用打包个人证书导入密码*/"p12" : "", /*iOS应用打包个人证书，打包配置文件关联的个人证书*/"devices" : "universal", /*iOS应用支持的设备类型，可取值iphone/ipad/universal*/"frameworks" : [] /*调用Native.js调用原生Objective-c API需要引用的FrameWork，如需调用GameCenter，则添加"GameKit.framework"*/},"google" : {"packagename" : "", /*Android应用包名，如io.dcloud.HelloH5*/"keystore" : "", /*Android应用打包使用的密钥库文件*/"password" : "", /*Android应用打包使用密钥库中证书的密码*/"aliasname" : "", /*Android应用打包使用密钥库中证书的别名*/"permissions" : ["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.CALL_PHONE\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"]},/*使用Native.js调用原生安卓API需要使用到的系统权限*/"orientation" : [ "portrait-primary" ], /*应用支持的方向，portrait-primary：竖屏正方向；portrait-secondary：竖屏反方向；landscape-primary：横屏正方向；landscape-secondary：横屏反方向*/"icons" : {"ios" : {"prerendered" : true, /*应用图标是否已经高亮处理，在iOS6及以下设备上有效*/"auto" : "", /*应用图标，分辨率：512x512，用于自动生成各种尺寸程序图标*/"iphone" : {"normal" : "", /*iPhone3/3GS程序图标，分辨率：57x57*/"retina" : "", /*iPhone4程序图标，分辨率：114x114*/"retina7" : "", /*iPhone4S/5/6程序图标，分辨率：120x120*/"retina8" : "", /*iPhone6 Plus程序图标，分辨率：180x180*/"spotlight-normal" : "", /*iPhone3/3GS Spotlight搜索程序图标，分辨率：29x29*/"spotlight-retina" : "", /*iPhone4 Spotlight搜索程序图标，分辨率：58x58*/"spotlight-retina7" : "", /*iPhone4S/5/6 Spotlight搜索程序图标，分辨率：80x80*/"settings-normal" : "", /*iPhone4设置页面程序图标，分辨率：29x29*/"settings-retina" : "", /*iPhone4S/5/6设置页面程序图标，分辨率：58x58*/"settings-retina8" : "", /*iPhone6Plus设置页面程序图标，分辨率：87x87*/"app@2x" : "unpackage/res/icons/120x120.png","app@3x" : "unpackage/res/icons/180x180.png","notification@2x" : "unpackage/res/icons/40x40.png","notification@3x" : "unpackage/res/icons/60x60.png","settings@2x" : "unpackage/res/icons/58x58.png","settings@3x" : "unpackage/res/icons/87x87.png","spotlight@2x" : "unpackage/res/icons/80x80.png","spotlight@3x" : "unpackage/res/icons/120x120.png"},"ipad" : {"normal" : "", /*iPad普通屏幕程序图标，分辨率：72x72*/"retina" : "", /*iPad高分屏程序图标，分辨率：144x144*/"normal7" : "", /*iPad iOS7程序图标，分辨率：76x76*/"retina7" : "", /*iPad iOS7高分屏程序图标，分辨率：152x152*/"spotlight-normal" : "", /*iPad Spotlight搜索程序图标，分辨率：50x50*/"spotlight-retina" : "", /*iPad高分屏Spotlight搜索程序图标，分辨率：100x100*/"spotlight-normal7" : "", /*iPad iOS7 Spotlight搜索程序图标，分辨率：40x40*/"spotlight-retina7" : "", /*iPad iOS7高分屏Spotlight搜索程序图标，分辨率：80x80*/"settings-normal" : "", /*iPad设置页面程序图标，分辨率：29x29*/"settings-retina" : "", /*iPad高分屏设置页面程序图标，分辨率：58x58*/"app" : "unpackage/res/icons/76x76.png","app@2x" : "unpackage/res/icons/152x152.png","notification" : "unpackage/res/icons/20x20.png","notification@2x" : "unpackage/res/icons/40x40.png","proapp@2x" : "unpackage/res/icons/167x167.png","settings" : "unpackage/res/icons/29x29.png","settings@2x" : "unpackage/res/icons/58x58.png","spotlight" : "unpackage/res/icons/40x40.png","spotlight@2x" : "unpackage/res/icons/80x80.png"},"appstore" : "img/logo.png"},"android" : {"mdpi" : "unpackage/res/icons/48x48.png", /*普通屏程序图标，分辨率：48x48*/"ldpi" : "unpackage/res/icons/48x48.png", /*大屏程序图标，分辨率：48x48*/"hdpi" : "unpackage/res/icons/72x72.png", /*高分屏程序图标，分辨率：72x72*/"xhdpi" : "unpackage/res/icons/96x96.png", /*720P高分屏程序图标，分辨率：96x96*/"xxhdpi" : "unpackage/res/icons/144x144.png", /*1080P 高分屏程序图标，分辨率：144x144*/"xxxhdpi" : "unpackage/res/icons/192x192.png"}},"splashscreen" : {"ios" : {"iphone" : {"default" : "", /*iPhone3启动图片选，分辨率：320x480*/"retina35" : "", /*3.5英寸设备(iPhone4)启动图片，分辨率：640x960*/"retina40" : "", /*4.0 英寸设备(iPhone5/iPhone5s)启动图片，分辨率：640x1136*/"retina47" : "", /*4.7 英寸设备(iPhone6)启动图片，分辨率：750x1334*/"retina55" : "", /*5.5 英寸设备(iPhone6 Plus)启动图片，分辨率：1242x2208*/"retina55l" : "" /*5.5 英寸设备(iPhone6 Plus)横屏启动图片，分辨率：2208x1242*/},"ipad" : {"portrait" : "", /*iPad竖屏启动图片，分辨率：768x1004*/"portrait-retina" : "", /*iPad高分屏竖屏图片，分辨率：1536x2008*/"landscape" : "", /*iPad横屏启动图片，分辨率：1024x748*/"landscape-retina" : "", /*iPad高分屏横屏启动图片，分辨率：2048x1496*/"portrait7" : "", /*iPad iOS7竖屏启动图片，分辨率：768x1024*/"portrait-retina7" : "", /*iPad iOS7高分屏竖屏图片，分辨率：1536x2048*/"landscape7" : "", /*iPad iOS7横屏启动图片，分辨率：1024x768*/"landscape-retina7" : "" /*iPad iOS7高分屏横屏启动图片，分辨率：2048x1536*/}},"android" : {"mdpi" : "", /*普通屏启动图片，分辨率：240x282*/"ldpi" : "", /*大屏启动图片，分辨率：320x442*/"hdpi" : "", /*高分屏启动图片，分辨率：480x762*/"xhdpi" : "", /*720P高分屏启动图片，分辨率：720x1242*/"xxhdpi" : "" /*1080P高分屏启动图片，分辨率：1080x1882*/}},"plugins" : {"speech" : {"ifly" : {}}}}}
}

五、打包

选择上面菜单栏的发行，原生App在线云端打包

选择完之后就来到这个位置。

上面如果选择了自己的证书下面的（证书别名、私钥密码、证书文件）都需要填写自己的。

因为我这里没有证书我就选择了使用DCloud公用证书。下面的的信息就不需要填写。这里都填写好之后就可以点击下面的打包按钮。进行app打包了。

打包成功后会显示

成功之后就可以在控制台看到如下app在队列中的信息。

等待完成之后就可以下载你的apx文件了。

下载完成之后

这样打包工作就完成了。

Ios的打包前面的操作都是一样的就后面的配置有一些区别按照要求进行配置就好。

使用Hbuilder构建跨平台的移动app相关推荐

《PhoneGap精粹：构建跨平台的移动App》——1.10节PhoneGap资源
本节书摘来自异步社区<PhoneGap精粹:构建跨平台的移动App>一书中的第1章,第1.10节PhoneGap资源,作者 [美]John M. Wargo,更多章节内容可以访问云栖社区& ...
NativeScript - JS 构建跨平台的原生 APP
使用 NativeScript,你可以用现有的 JavaScript 和 CSS 技术来编写 iOS.Android 和 Windows Phone 原生移动应用程序.由原生平台的呈现引擎呈现界面而不 ...
小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载四（使用程序载入事件）...
在了解了PhoneGap中都有哪些事件之后,本节将開始对这些事件的使用方法进行具体地介绍.本节要介绍的是程序载入事件,也就是deviceready.pause和resume这3个事件. [范例4-2 ...
小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载一（PhoneGap中的API）...
之前本博连载过<构建跨平台APP:jQuery Mobile移动应用实战>一书,深受移动开发入门人员的喜爱. 从现在开始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望曾经是小白 ...
小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）...
作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...
《构建跨平台APP：jQuery Mobile移动应用实战》
http://product.dangdang.com/23472199.html http://item.jd.com/1159658668.html <构建跨平台APP:jQuery Mob ...
《构建跨平台APP：jQuery Mobile移动应用实战》连载三（整蛊小游戏）
笔者当年还是一枚小白的时候,经常被QQ控件或各种论坛上的某个比较吸引人的标题所吸引,点开之后却发现网页中弹出了一个对话框,必须要不断地点击烦人的按钮无数次才能关闭这个页面.当时也曾经在网上搜索过相应的 ...
小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载结束
感谢各位亲们的大力支持,小白学jquery Mobile<构建跨平台APP:jQuery Mobile移动应用实战>连载已经结束了. 有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习 ...
小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载三（通过实例来体验生命周期）
4.1.2 通过实例来亲身体验Activity的生命周期上一小节介绍了Activity生命周期中的各个过程,本小节将以一个简单的实例来使读者亲身体验到Activity生命周期中的各个事件. 在Ec ...

使用Hbuilder构建跨平台的移动app

使用Hbuilder构建跨平台的移动app

一、安装Hbuilder

二、打开Hbuilder

三、编辑好项目代码

四、进行manifest.json配置

基础配置

图标配置

启动图配置

SDK配置

模块权限配置

源码视图

五、打包

使用Hbuilder构建跨平台的移动app相关推荐

最新文章

热门文章