浅谈 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