manifest.json 解析--手机web app开发笔记（三-1）

在hbuilderx生成的文档中，还有一个“manifest.json”，只要是创建“移动app”应用，都会在工程下生成这个文件，一看扩展名就知道他是一个json格式文件，文件文件根据w3c的webapp规范制定，是5+移动app的配置文件，用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息，用户可通过hbuilderx的可视化界面视图或者源码视图来配置5+移动app的信息。

在“项目管理器”中点击即可打开可视化界面，如图3-1。

 

图3-1配置文件可视化管理界面

在这个管理界面中，左侧有“基本配置”、“图标配置”、“启动配置”、“sdk配置”、“模块权限配置”和“app常用其它配置”6个可视化配置界面；一个“源码试图”，是6个可视化界面配置代码，可视化界面选择修改后的配置代码相应的跟着变动。app相关配置，你可以在可视化界面中进行配置，也可以在代码界面进行配置。下面我们一次学习。

一、基本配置

在此基本可视化界面中我们有8个参数需要配置，我详细的介绍了每个参数的用途并进行了具体配置，情况如下：

1.dcloud appid：以后简称 appid，它 是 dcloud 应用的唯一标识，在 dcloud 提供的所有服务中，都会以 appid 来标记一个应用。这个appid，只有我们登陆的时候才分配，不登录的时候一直显示红色。也就是说我们需要登陆hbuilderx才能分配真个appid，一般自动生成，不需要我们手动改写。

2.应用名称：app打包后在手机上桌面的快捷方式名称；我们填写为“编程之路”。

3.应用版本名称：用户可通过plus api（plus.runtime.versionname）获取应用的版本号，需提交app云端打包后才能生效。 我们设置为1.0。

4.应用版本号：用户可通过plus api（plus.runtime.version，这是html5+提供的api，后面我们学习的时候会详细讲述）获取应用的版本号，需提交app云端打包后才能生效；设置为10。着重强调一下版本名称和版本号的区别，版本名称为string类型，版本号为int类型，版本号涉及app更新问题，版本更新一般会通过版本号数字来判断更新。

5.应用入口页面：应用启动后自动打开的第一个html页面，可填写本地html文件地址（相对于应用根目录）或网络地址（以http://或https://开头）；我们使用默认值index.html。

6.应用描述，对app程序进行描述，我们填写为“编程之路，记录编程点滴”;

7.应用是否全屏：选中表示应用程序全屏。什么是全屏呢？全屏就是手机运行你的app运行时，手机界面除了看见你app的界面外，看不到其它任何别的东西，包括上端的状态栏，也就是看不见电量、信号那条了，而不是状态栏透明。全屏常见于横屏游戏，一般场景应该使用状态栏变色或状态栏透明。状态栏透明、变色和消失是有区别的，在后面的章节我们会有介绍。这个选项我们不进行选择。

8.根据重力感应自动横竖屏，这里面有4个选项可供选择，这是个多项选择，根据需要进行选择配置。第一个可供选项"portrait-primary"表示竖屏正方向；"portrait-secondary"表示竖屏反方向；"landscape-primary"表示横屏正方向；"landscape-secondary"：表示横屏反方向。这里我们选择"portrait-primary。

这样我们的基本配置已经配置完毕了，我们点击左侧的“源码试图”，查看一下对应的代码。 

 {

  "@platforms" : [ "android", "iphone", "ipad" ],/*app运行平台选择，一个是android，一个是iphone；一个是ipad；可以删除，但必须保留一项*/

  "id" : "", /*应用的标识*/

    "name" : "编程之路", /*应用名称，程序桌面图标名称*/

    "version" : {

        "name" : "1.0", /*应用版本名称*/

        "code" : 10 /*应用版本号*/

    },

    "description" : "编程之路，一步一个脚印", /*应用描述信息*/

     "launch_path" : "index.html", /*应用的入口页面，默认为根目录下的index.html；支持网络地址，必须以http://或https://开头*/

      "orientation" : [ "portrait-primary" ],

      "fullscreen" : false

} 

二、图标配置

单击左侧的“图标配置”就进入了图标配置的可视化页面，如图3-2所示，我们对应的选择图标文件即可。

 

 

图3-2图标配置界面

 

图标配置非常简单，android平台没有对图标进行限制，按照建议的分辨率配置即可，可以有透明区域，也可以是圆角图标，可能有些特殊rom对图标有所要求，提交应用市场时注意看是否有要求说明。但是，ios平台对图标却有些具体要求：

1.图标必须是直角，不要使用圆角图标，使用圆角appstore审核不会通过

2.打包提交appstore时，必须配置1024*1204分辨率的appstore图标，云端打包机默认使用纯白色图标

3.所有图标不要包含透明信息（alpha通道），否则提交appstore会报以下错误，导出png图标时去掉alpha通道即可

现在，我编写的app主要是运行andriod平台，所以我们只配置就好了。我们在可视化界面中选择我们app的logo文件夹，点击自动生成所有图标并替换，这样我们的图标设置会自动生成17种不同大小格式的png图片，存在程序app文件夹下，具体路径为：“编程之路\unpackage\res\icons\”，最后配置的结果如图3-3所示。

 

图3-3 图标配置

 

点击左侧的“源码试图”，查看一下对应的代码。

 "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" : "unpackage/res/icons/1024x1024.png"

                },

                "android" : {

                    "mdpi" : "", /*普通屏程序图标，分辨率：48x48*/

                    "ldpi" : "", /*大屏程序图标，分辨率：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"

                }

            }

 

三、启动配置

单击左侧的“启动配置”就进入了图标的配置可视化页面，如图3-4所示：

 

图3-4 启动配置

这个界面有3个重要的参数和启动图片需要配置。

1.启动界面需要显示等待雪花，这个参数勾选以后app程序启动时，在启动界面会有一个不停旋转的等待雪花，知道进入程序，雪花才消失。如果不选择不会出现等待雪花。我们对此参数进行勾选。

2.自动关闭启动界面，这个参数勾选以后app程序进入主界面（也就是我们在基本配置中填写的应用入口页面index.html显示）后会关闭app程序的启动界面。如果勾选这个参数，app程序手机显示界面一直会显示启动界面，实质上app程序进入了主程序，这个界面也不会消失，需要我们编写代码关闭启动界面。这个参数我们会在程序引导页的时候用到，现在我们先默认勾选。

3.自动关闭启动页面的延时时间，这个参数配置是然我们自动控制控制关闭启动页面的时间，我们这里空着就可以了。

上述3个参数设置对应的代码如下：

 

"plus" : {

        "splashscreen" : {

            "autoclose" : true, /*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closesplashscreen()关闭*/

            "waiting" : true /*是否在程序启动界面显示等待雪花，true表示显示，false表示不显示。*/

        }

        }

 

 

 

4.启动图片设置。目前hbuilderx中android启动图片设置仅定义3种标准分辨率的启动图配置，而实际上存在很多不同分辨率的手机，导致启动图会进行拉伸或压缩引起变形，android平台为了解决此问题就出现了可以任意调整大小的一种图片格式“.9.png”。下面详细介绍一下：

优点：“.9.png”是一种特殊的图片格式，它可以指定特定的区域进行拉伸而不失真，可以只配置1张或多张图片适配更多分辨率，减少apk的体积（推荐至少配置1080p高分屏启动图片）。

区别：“.9.png”图片和一般图片的区别在于.9.png图片有四条黑边，而一般的图片没有，这四条黑边就是用来拉伸和指定显示位置的。使用“.9.png”图片后，整个图片应该是包裹着你想要显示的内容的，而没有使用的话整个图片将会被拉伸。

制作：那么如何制作“.9.png”图片呢？制作“.9.png”最常用的有两种工具，一是在android sdk目录下的tools目录下，有一个叫做draw9patch.bat的文件，双击打开就可以使用（最新android sdk该文件已经不存在，若电脑不没有安装android studio，可下载附件工具编辑.9.png图片）；二是使用android studio，因为android studio已经集成.9.png制作工具，只需选中需要生成的png文件，然后右键，点击create 9-patch file 选项。

绘制之前先来说一下“.9.png”图片的四条黑边的意义，每条黑边的意义都不一样：上边线：图像横向可拉伸的部分；左边线：图像纵向可拉伸的部分；右边线：图像纵向可填充内容（文字或图片）区域；下边线：图像横向可填充内容（文字或图片）区域

我选用的是draw9patch.jar，双击这个程序就可以打开.“.9.png”图片编辑界面如图3-5所示。

 

图3-5draw9patch.jar编辑界面

选择菜单栏的file菜单选择“open 9-path...”选择我们需要创建的“.9.png”图片，原图片必须是png格式的，效果如图3-6 所示：

 

图3-6 “.9.png”编辑界面

   左侧是我们选择的原图片，右边是拉大的预览图片，我们很容易发现右侧图片变形的厉害。左侧原图片的上下左右都有一列透明的线条，我们只要把鼠标放在线条范围内，按住不放就可画出黑色的线条，就是图像可拉伸的部分，我最后的划线结果如图3-7所示。

 

图3-7画出黑线的“.9.png”图片

这时，我们在看看右侧预览效果如图3-8所示，明显看出右侧预览图片关键部分没有变现，这就是我们想要的效果。选择菜单栏的file菜单选择“save 9-path...”，把图片保存即可。保存结果图片扩展名自动变为“.9.png”。

 

图3-8“.9.png”图片预览效果

这样我们的一幅“.9.png”图片就制作完毕。同理，我们如果有需要，可制作需要的多张图片。

启动图片设置可视化界面，android启动图片设置我们选择对应的3张“.9.png”图片就ok了。对应的代码如下：

"splashscreen" : {                

                "android" : {

                    "mdpi" : "", /*普通屏启动图片，分辨率：240x282*/

                    "ldpi" : "", /*大屏启动图片，分辨率：320x442*/

                    "hdpi" : "unpackage/res/qidong/480-762.png", /*高分屏启动图片，分辨率：480x762*/

                    "xhdpi" : "unpackage/res/qidong/720_1242.png", /*720p高分屏启动图片，分辨率：720x1242*/

                    "xxhdpi" : "unpackage/res/qidong/1080_1882.png" /*1080p高分屏启动图片，分辨率：1080x1882*/

                }

            }

 

注意：不同尺寸的启动图是为了适配不同分辨率的手机，所以提交打包时请务必上传不同尺寸的启动图，切忌上传多张同尺寸启动图