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

发表于
字数统计: 2,636 | 阅读时长 ≈ 12

​ 现在我们要开发一款通用的app，如果web端需要写，安卓、ios也需要写。这样岂不是太麻烦，也增加了公司的开发成本。于是乎就有了能跨平台的东西出来，所有的平台只需要写一次就ok。今天在这里我就介绍一下使用Hbuilder构建跨平台的移动app。需要准备的东西如下：

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

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

一、安装Hbuilder

​ 此处省略。不是本文重点，有关安装问题自行百度。

二、打开Hbuilder

​ 选中红色区域内新建项目

1

​ 会弹出如下界面

2

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

3

三、编辑好项目代码

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

1540448632068

四、进行manifest.json配置
基础配置

5

图标配置

6

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

启动图配置

7

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

SDK配置

8

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

模块权限配置

9

配置软件获取的系统权限

源码视图

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
{
    "@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在线云端打包

10

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

11

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

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

打包成功后会显示

12

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

13

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

14

下载完成之后

15

这样打包工作就完成了。

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

原创出品，喜欢可以收藏转载哦！！！

作者：lizhonglin

github: https://github.com/Leezhonglin/

blog: https://leezhonglin.github.io/

-------------本文结束 感谢您的阅读-------------