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

女爷i 2022-08-28 11:58 4阅读 0赞

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

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

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

##### 一、安装Hbuilder #####

##### 二、打开Hbuilder #####

选中红色区域内新建项目

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

会弹出如下界面

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

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

![在这里插入图片描述][a6fe3454adb248789771a57935b244e3.png_pic_center]

##### 三、编辑好项目代码 #####

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]

##### 四、进行manifest.json配置 #####

###### 基础配置 ######

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]

###### 图标配置 ######

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]

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

###### 启动图配置 ######

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 5]

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

###### SDK配置 ######

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 6]

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

###### 模块权限配置 ######

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 7]

配置软件获取的系统权限

###### 源码视图 ######

主要查看上面的配置的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在线云端打包

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 8]

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_18_color_FFFFFF_t_70_g_se_x_16_pic_center]

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

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

打包成功后会显示

![在这里插入图片描述][cc2c2dd930d14415b257c7fc9ad4786a.png_pic_center]

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

![在这里插入图片描述][97a13a69b94f46bfac7eb38c7162cb8d.png_pic_center]

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

![在这里插入图片描述][a5e659fbc64a4873a2f8812dd142f618.png_pic_center]

下载完成之后

![在这里插入图片描述][5515a72bfd954c9aa4cf9da2fcb8ed5a.png_pic_center]

这样打包工作就完成了。

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

[Link 1]: http://www.dcloud.io/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/7a6d5150d51d4695a878e6cb217c6860.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220828/a523ce1020204b28bf009310d1ee1dde.png
[a6fe3454adb248789771a57935b244e3.png_pic_center]: /images/20220828/4dcaa70a84fe4682b1e3fc402a80ff8d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: /images/20220828/d0b8a8b9573e42d3b8743eded935a9d6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]: /images/20220828/d9f12cb12cfd489d866de7057e7bd75e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]: /images/20220828/48c94f8148794a368cc410ccda2aff28.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 5]: /images/20220828/c55653e0993f4164bb3ac9b5676a21d5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 6]: /images/20220828/7c75810c38a949afacecfed313dd78a0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 7]: /images/20220828/3a765d0d59904cea9699bfaf566afb07.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 8]: /images/20220828/b1fed8816e5841ed86fd14089aa23cbd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATGktYm9zcw_size_18_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/c89e783e78014d9e9059ced9404b9d43.png
[cc2c2dd930d14415b257c7fc9ad4786a.png_pic_center]: /images/20220828/62984d97e22d4186bc8900bae86ce566.png
[97a13a69b94f46bfac7eb38c7162cb8d.png_pic_center]: /images/20220828/ba8f0a48287b4eb9b587372966d5b443.png
[a5e659fbc64a4873a2f8812dd142f618.png_pic_center]: /images/20220828/5fdae801023e4e128ac7c475ff32107c.png
[5515a72bfd954c9aa4cf9da2fcb8ed5a.png_pic_center]: /images/20220828/a702e7fa2ef445caa3cad1d8e6efca9d.png