概述Cordova开发的相关源码可以从官网下载http://cordova.apache.org/,内容为一个压缩包,包括cordova的各个模块。和 Cordova 类似的框...

概述

Cordova开发的相关源码可以从官网下载 http://cordova.apache.org/,内容为一个压缩包,包括cordova的各个模块。和 Cordova 类似的框架还有 Trigger.io - mobile platform for web developers

Cordova源码Cordova源码

PhoneGap & Cordova

  • PhoneGap是Apache Cordova的一个分支。你可以这样想,Apache Cordova是一台发动机,运行在PhoneGap上,就像WebKit这个浏览器引擎运行在Chrome浏览器和Safari浏览器上一样。
  • PhoneGap是Adobe在Cordova的基础上加入了自家的各种服务而成的。例如,“PhoneGap构建服务”,可以让程序员将他的源代码上传到“云编译器”,生成应用程序每一个所支持平台的安装包。
  • Is there a difference between PhoneGap and Cordova commands? - Stack Overflow
  • PhoneGap

PhoneGap 3.0 的变化

将cordova原先的官方核心插件剥离出来与自定义插件处于同一层次。新插件架构所带来的好处是可以让应用更小更快,只需要加载所需要的API。

phonegap2.x&3.x.pngphonegap2.x&3.x.png

开发路线

  • 跨平台工作流: 如果你想让你的应用可以跑在尽可能多的移动平台,可以使用这种开发路线。
  • 以平台为中心的工作流: 如果你想专注于单个平台,并且向在更底层修改应用,那么你应该使用以平为中心的工作流。平台平台相关的工具包在这里下载。

Setup

  1. 下载和安装 Node.js
  2. 下载安装 git client
  3. 安装 cordova

     $ sudo npm install -g cordova
    

Quick Start

创建应用

$ cordova create hello com.example.hello HelloWorld

其中:

  • hello 目录名称
  • com.example.hello 保存在 config.xml 中,应用的唯一标识。
  • HelloWorld 应用名称,保存在 config.xml 中。

生成的目录结构如下:

|   config.xml: contains important metadata needed to generate and distribute the application.
|
+---hooks
+---merges
+---platforms 平台,无默认平台。
+---plugins 插件。
\---www   
    |   index.html
    |
    +---css
    |       index.css
    |
    +---img
    |       logo.png
    |
    \---js
            index.js

生成的工程是一个包含不然任何插件的目录,也不属于任何平台。

添加平台

$ cd hello

在 Windows 上,可以添加以下平台:

$ cordova platform add wp7
$ cordova platform add wp8
$ cordova platform add windows8
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos

检查允许安装的平台和已经安装的平台:

$ cordova platforms ls

删除平台:

  $ cordova platform rm android

添加或删除平台会影响 platforms/ 下的内容。添加平台或者 build 时,www/ 的内容将拷贝到所有平台下,如platforms/ios/www 和 platforms/android/assets/www。开发时,只能修改与 platforms/ 平行的 www 目录。

构建

// 编译 platforms 下的所有平台
$ cordova build

// 编译指定平台
$ cordova build ios
// 这条命令也等价于以下两个命令
$ cordova prepare ios
$ cordova compile ios

运行

// 在模拟器上运行
$ cordova emulate android

// 在设备上运行,如果设备不存在,会选择模拟器运行。
$ cordova run android

Using merges to Customize Each Platform

工程目录下的 merges/ 用于为平台指定特殊文件,build 时,merges/ 中的文件将覆盖 www/ 下对应目录结构的文件。

如:

www/index.html

<link rel="stylesheet" type="text/css" href="css/overrides.css" />

www/css/overrides.css

body { font-size:12px; }

merges/android/css/overrides.css

body { font-size:14px; }

build 后, Android 平台的页面 字体大小为 14px。

帮助

cordova or cordova help
cordova info

升级 Cordova 和工程

参考:PhoneGap API Documentation

升级 cordova:

// 升级到最新版
$ sudo npm update -g cordova
// 升级到指定版本
$ sudo npm install -g cordova@3.1.0-0.2.0

升级工程:

$ cordova platform update android
$ cordova platform update ios

插件

添加插件

插件官网:plugins.cordova.io

  • 搜索插件:

      $ cordova plugin search bar code
      -> com.phonegap.plugins.barcodescanner - Scans Barcodes
    
  • 添加插件:

      $ cordova plugin add 插件名
    

    同时添加多个插件:

      $ cordova plugin add org.apache.cordova.console org.apache.cordova.device
    

    为插件指定版本:

      $ cordova plugin add org.apache.cordova.console@latest
      $ cordova plugin add org.apache.cordova.console@0.2.1
    

    插件的默认下载地址为 registry.phonegap.com,我们可以指定插件的下载地址:

      $ cordova plugin add https://github.com/apache/cordova-plugin-console.git
    

    默认从指定地址的 master 分支下载插件,我们可以指定 git-ref 如分支或者 tag

      $ cordova plugin add https://github.com/apache/cordova-plugin-console.git#r0.2.0
    

    如果插件存在 git repo 的子目录中,我们可以通过 : 来指定:

      $ cordova plugin add https://github.com/someone/aplugin.git#:/my/sub/dir
    

    同时指定 git-ref

      $ cordova plugin add https://github.com/someone/aplugin.git#r0.0.1:/my/sub/dir
    

    添加本地路径的插件,该插件目录中需要包含 plugin.xml 文件:

      $ cordova plugin add ../my_plugin_dir
    
  • 查看插件:

      $ cordova plugin ls    # or 'plugin list'
      -> [ 'org.apache.cordova.console' ]
    
  • 移除插件:

      $ cordova plugin rm org.apache.cordova.console
      $ cordova plugin remove org.apache.cordova.console    # same
    

常用插件:

  • 基本设备信息 (Device API)

      $ cordova plugin add org.apache.cordova.device
    
  • 网络连接和电池 Events:

      $ cordova plugin add org.apache.cordova.network-information  
      $ 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  
    
  • 照相机, 媒体播放 and 截图:

      $ cordova plugin add org.apache.cordova.camera  
      $ cordova plugin add org.apache.cordova.media-capture  
      $ cordova plugin add org.apache.cordova.media  
    
  • 访问设备文件或者网络 (File API):

      $ 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  
    
  • 全球化:

      $ cordova plugin add org.apache.cordova.globalization  
    
  • 启动动画:

      $ cordova plugin add org.apache.cordova.splashscreen  
    
  • 打开浏览器窗口 (InAppBrowser):

      $ cordova plugin add org.apache.cordova.inappbrowser  
    
  • 调试控制台:

      $ cordova plugin add org.apache.cordova.console
    

参考:Which Core PhoneGap/Cordova Plugins Do I Need?

关键字标签:教程CordovaCordova教程TutorialPhonegap教程

上一篇:使用 Meteor 快速开发 Web 应用程序
下一篇:最后一页