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*/}}
注意:不同尺寸的启动图是为了适配不同分辨率的手机,所以提交打包时请务必上传不同尺寸的启动图,切忌上传多张同尺寸启动图
转载于:https://www.cnblogs.com/agoodlife/p/11331291.html
manifest.json 解析--手机web app开发笔记(三-1)相关推荐
- manifest.json 解析--手机web app开发笔记(三-2)
四.SDK配置和模块权限配置 SDK 就是 Software Development Kit 的缩写,中文意思就是"软件开发工具包",也就是辅助开发某一类软件的相关文档.范例和工具 ...
- java 开发手机web,手机web app开发笔记
各位朋友好,最近自学开发了一个手机Web APP,"编程之路",主要功能包括文章的展示,留言,注册登录,音乐播放等.为了记录学习心得,提高自己的编程水平,也许对其他朋友有点启发,特 ...
- web系统 手机app 能访问吗?_成都APP开发:原生APP开发与Web APP开发有什么区别呢?...
智能手机上的APP应用软件对于人们来说已经成为日常工作生活当中必不可少的工具,无论是工作生活中的聊天交流,购物,饮食,出行,娱乐都会有相应的APP软件.目前常见的APP软件开发模式有两种,一种是原生A ...
- Google Web App开发指南
http://www.html5rocks.com/webappfieldguide/case-studies/case-study-intro/ 第一章:什么是Web Apps? 很多人向我问起学习 ...
- web app开发技巧总结
Web APP开发技巧总结 一.META/LINK相关: 1.百度禁止转码 通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心.不过我们可以通过这个meta标签来禁 ...
- 移动web app开发必备 - 异步队列 Deferred
背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeo ...
- Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
目录 前言 一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接 二.从当前页面链接到指定位置 三.链接的访问情况 四.在新窗口中打开链接 例题 结语 前言 本节介绍超链接标签即 ...
- 原生开发什么意思_成都APP开发:原生APP开发与Web APP开发有什么区别呢?
智能手机上的APP应用软件对于人们来说已经成为日常工作生活当中必不可少的工具,无论是工作生活中的聊天交流,购物,饮食,出行,娱乐都会有相应的APP软件.目前常见的APP软件开发模式有两种,一种是原生A ...
- 原生APP开发与WEB APP开发的区别
APP开发模式通常分为Web APP与Native APP原生模式两种,这两种模式均各自有自己的优势,到底是采用Native App开发还是采用Web App开发一直是业界争论的焦点,但是随着HTML ...
最新文章
- 南昌航空航天c语言试卷,2016年南昌航空大学软件学院程序设计复试笔试仿真模拟题...
- ngin配置301重定向设置方法和nginx子目录301重定向
- Python创建一个循环链表、双向循环链表
- jquery cookie 插件 (支持json对象) 可以跟jquery 集成 也可以单独使用
- yii2 获取模块名,控制名,动作方法名
- 补丁服务器 注册表,注册表补丁
- 记录一下,不是所有的韩语输入法apk,装到同一个系统,都能弹出软键盘
- matlab学习笔记 struct函数
- 【数据挖掘】搜狐公司数据挖掘工程师笔试题
- defy翻新机鉴别方法
- 房产经纪龙头居安思危孵化「贝壳」,如何用数字化解找房之痛?
- AWS免费套餐避坑攻略:查看账户下所有region的资源,及时关停不需要的服务
- 解决QQ显示“无法访问个人文件夹”方法
- 计算机组成原理 第三章存储系统 知识点
- 新版海螺影视主题模板M3.1全解密版本多功能苹果CMSv10后台自适应主题开源全解密版
- igh ethercat主站文档(中文翻译下)
- Python基础-----三元表达式、列表解析、生成器表达式
- Flash务实主义(三)——最短路径原则(下)
- js判断是安卓android或者苹果iphone及iphonex
- android手柄设置在哪里设置,android蓝牙游戏手柄怎样设置
热门文章
- 四苯乙烯和β-环糊精聚集诱导发光聚合物/Pb~(2+)诱导GSH-Au(Ⅰ)聚集诱导发光微球的研究
- 麦塔APP全新升级,众多新增板块,开启元宇宙新格局
- 众合云科旗下51社保荣获MeetHR Group十大影响力人力资源品牌奖
- 第一章:分布式计算概述
- 小米6解BL锁教程申请BootLoader解锁教程
- 开源盛行:为什么学习国产达梦数据库?
- 事后诸葛亮会议 beta 阶段的 postmortem 报告
- ciscn_2019_es_7 6/100
- 学系统集成项目管理工程师(中项)系列26_新兴信息技术
- 自动写文案神器,工作在也不焦虑-新媒体运营工具分享