浅谈 PhoneGap
目前,混合应用 (Hybird App) 风生水起,一说到Hybird App最常被提起的应该就是PhoneGap了吧。PhoneGap是用基于HTML, CSS, Javascript来创建移动跨平台应用的开发平台,拥有丰富的插件,便于app使用智能手机的核心功能。而Cordova是贡献给Apache后免费开源项目是从PhoneGap中抽出的核心代码是驱动PhoneGap的核心引擎。
一、Cordova简介
Cordova适用于单个页面的应用程序(SPA),即取代页面跳转,而是运行时请求一个web页面,加载初始资源(HTML, CSS, Javascript),并通过ajax为页面更新。优势:
- 一套代码可跨多个平台,无需重新实现与每个平台的语言和工具集
- 拥有多种插件,便于web视图访问手机设备级API,如条码扫描器、NFC通信,麦克风等,如仍不能满足需要可按照Cordova插件结构自行开发
- 有许多前端库,方便开发,更加美观,如
二、环境搭建
Cordova提供了2种基本工作流程来开发移动APP:
- Cross-platform(CLI) workflow (跨平台工作流):在不同移动操作系统上运行,引入Cordova 3.0 ,CLI是一种高级工具,可以一次性创建适用于不同操作系统的项目,在无特别的需要,建议采用此工作流
- Platform-centered workflow (平台为中心工作流):注重在单一平台的app,一般情况下需要修改SDK的项目可选择此工作流,如果选择了此工作流虽然也可以创建跨平台app,但由于缺少向CLI那样的高级工具,开发起来是比较困难的。
2种工作流在搭建环境方面差别不大,接下来以CLI为示例来演示环境搭建过程:
- 安装目标SDK,在PC上安装支持的平台SDK:
- iOS (Mac)
- 亚马逊火 OS (Mac、 Linux、 Windows)
- Android (Mac、 Linux、 Windows)
- 黑莓 10 (Mac、 Linux、 Windows)
- Windows Phone 7 (Windows)
- Windows Phone 8 (Windows)
- Windows 8 (Windows)
- 火狐浏览器操作系统 (Mac、 Linux、 Windows)
- 安装Node.js
- 安装git客户端
- 安装Cordova
C:\>npm install -g cordova //window
- 创建应用程序,转到相应的开发目录
cordova create hello com.example.hello HelloWorld //window
- hello:项目生成目录
- com.example.hello:项目反向域样式标识符(reverse domain-style identifier)。此参数可选,但由于参数是位置定位的,如果这个参数不写,第三个参数也不能写。项目生成有可在config.xml中修改,但由于外部代码也使用此值如Java软件包
- HelloWorld:App的显示标题,可选,也可在config.xml中修改,且Java类名称也会用此值
- 添加平台,后面的命令需要在项目的目录中运行
cd hello cordova platform add ios cordova platform add amazon-fireos cordova platform add android cordova platform add blackberry10 cordova platform add firefoxos
- 构建APP,默认情况下,cordova create脚本生成骨骼是基于web应用程序的首页是www/index.html,编辑程序,完成后用cordova build,以迭代发哪个是生成项目,也可用cordova build ios生成特定平台项目
- 测试仿真器或设备上的的APP,移动平台SDK经常与仿真器捆绑在一起,以便启动该App时从主屏幕看到在不同平台功能交互的情况,如运行以下命令就在查看在android上的交互模拟状况
cordova emulate android
- 添加插件,开发中一方面可以使用web技术丰富你的app,同时还可以使用插件对cordova 提供的API进行访问,如以下常用插件:
cordova plugin add org.apache.cordova.device //设备基本信息 cordova plugin add org.apache.cordova.network-infomation //网络连接 cordova plugin add org.apache.cordova.battery-status //电池事件 cordova plugin add org.apache.cordova.device-motion //加速度计 cordova plugin add org.apache.cordova.device-orientation //指南针 cordova plugin add org.apache.cordova.geolocation //地理位置 cordova plugin add org.apache.cordova.camera //相机 cordova plugin add org.apache.cordova.media-capture //媒体捕获 cordova plugin add org.apache.cordova.device-media //媒体 cordova plugin add org.apache.cordova.file //设备上的文件 cordova plugin add org.apache.cordova.file-transfer cordova plugin add org.apache.cordova.dialogs //平台默认对话框 cordova plugin add org.apache.cordova.vibration //振动发出通知 cordova plugin add org.apache.cordova.contacts //联系人
三、Config.xml配置
在环境搭建中已经提到过 config.xml,config.xml是一个全局配置文件,控制app的多方面行为/特性,以下是通过create创建项目并运行了添加device插件命令后生成的config.xml文件:
<?xml version='1.0' encoding='utf-8'?> <widget id="com.example.hello" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>HelloWord</name> <description> A sample Apache Cordova application that responds to the deviceready event. </description> <author email="dev@cordova.apache.org" href="http://cordova.io"> Apache Cordova Team </author> <content src="index.html" /> <plugin name="cordova-plugin-whitelist" version="1" /> <access origin="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <platform name="android"> <allow-intent href="market:*" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> </platform> </widget>
- <widget>:
id
属性提供了应用程序的反向域标识符,version
在主/次/修补程序符号中表示其完整的版本号 - <name>:指定应用程序的正式名称,因为它出现在设备的主屏幕上和应用存储接口中
- <description>和<author>:指定的元数据和联系信息可能出现在应用存储列表内
- <content>:在顶级的web资源目录中定义了该应用程序的起始页。 默认值是
index.html
,这通常在一个项目的顶级www
目录中出现 - <access>:定义了一组外部域的应用程序被允许与其通信。 如上所示的默认值允许它访问任何服务器
- <platform>:有时必要指定首选项或其他特定于特定平台的元素