浅谈 PhoneGap

Author : luckyGirl

目前,混合应用 (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为示例来演示环境搭建过程:

  1. 安装目标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)
  2. 安装Node.js
  3. 安装git客户端
  4. 安装Cordova
            C:\>npm install -g cordova //window
    
  5. 创建应用程序,转到相应的开发目录
            cordova create hello com.example.hello HelloWorld //window
    
    • hello:项目生成目录
    • com.example.hello:项目反向域样式标识符(reverse domain-style identifier)。此参数可选,但由于参数是位置定位的,如果这个参数不写,第三个参数也不能写。项目生成有可在config.xml中修改,但由于外部代码也使用此值如Java软件包
    • HelloWorld:App的显示标题,可选,也可在config.xml中修改,且Java类名称也会用此值
  6. 添加平台,后面的命令需要在项目的目录中运行
            cd hello
            cordova platform add ios
            cordova platform add amazon-fireos
            cordova platform add android
            cordova platform add blackberry10
            cordova platform add firefoxos
    
  7. 构建APP,默认情况下,cordova create脚本生成骨骼是基于web应用程序的首页是www/index.html,编辑程序,完成后用cordova build,以迭代发哪个是生成项目,也可用cordova build ios生成特定平台项目
  8. 测试仿真器或设备上的的APP,移动平台SDK经常与仿真器捆绑在一起,以便启动该App时从主屏幕看到在不同平台功能交互的情况,如运行以下命令就在查看在android上的交互模拟状况
            cordova emulate android
    
  9. 添加插件,开发中一方面可以使用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>:有时必要指定首选项或其他特定于特定平台的元素
standard

Have your say