Cordova(PhoneGap) 环境搭建与基础

Cordova(PhoneGap)

创建步骤：官方Guide

1. 环境准备

   1. 安装 Node.js
      
      nodejs.org
   2. 安装 git
      
      git-scm.com (bin目录添加到path)
   3. 安装 cordova
      
      执行命令 npm install -g cordova

2. 创建,移除项目

   1. 执行命令
      
      cordova create CordovaStudy xy.study.cordova CordovaStudy
      
      参数：
      • CordovaStudy: 指定项目的文件夹名为CordovaStudy，Cordova会自动创建该文件夹
      • xy.study.cordova: 指定项目的包名
      • CordovaStudy: 指定项目名
   2. 添加平台 (需要先配置好相应的SDK)
      
      cordova platform add ios

cordova platform add android (需要先配置ANDROID_HOME)
   3. 删除平台
      
      cordova platform remove android

cordova platform rm ios

3. 运行项目(需要安装ant ANT_HOME)

   1. 构建应用

      • 执行命令: cordova build
      • 或者指定平台: cordova build android

      cordova build android
      
      相当于执行了cordova prepare android 和 cordova compile android

   2. 运行应用

      执行命令: cordova emulate android

      该命令重新生成该应用并在模拟器上运行

      执行命令: cordova run android

      该命令用于在真机上运行

4. 插件的添加

   1. 插件搜索:
      
      执行命令: cordova plugin search bar code
      
      参数:bar,code 均为搜索的关键字
   2. 添加插件:
      
      执行命令:
      
      cordova plugin add org.apache.cordova.console (可以接多个插件，空格分隔)
   3. 查看已安装的插件
      
      执行命令: cordova plugin ls
   4. 删除插件:
      
      执行命令: cordova plugin remove org.apache.cordova.console (可以接多个插件，空格分隔)

5. 多平台修改

   1. 根目录下创建文件夹merges
   2. merges下创建相应平台的文件夹，及要修改的对应的文件
      
      eg. merges/androids/css/overrides.css
      
      此文件就会覆盖掉 www/css/overrides.css

6. 其他命令

   • 帮助: cordova help
   • 更新: Cordova:npm update -g cordova
   • 信息: npm info cordova
   • 安装指定版本: npm install -g cordova@3.1.0-0.2.0

常用插件：

设备API:

cordova plugin add org.apache.cordova.device(可以接多个插件，空格分隔)

網路連接和電池事件：

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

相機、 媒體重播和捕獲：

cordova plugin add org.apache.cordova.camera

cordova plugin add org.apache.cordova.media-capture

cordova plugin add org.apache.cordova.media

訪問設備或網路 （檔 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

打開新的瀏覽器視窗

cordova plugin add org.apache.cordova.inappbrowser

調試主控台：

cordova plugin add org.apache.cordova.console

不同平台生成不同的代码的处理方式

1. 项目的根目录下创建merges文件夹
2. merges文件夹下创建要对应平台的文件夹（eg:android）
3. 在对应平台目录(merges\android)下编写对应平台的特定内容
   
   eg: css , 创建css文件夹，css文件。
   
   该文件会在生成指定平台应用时（build），自动覆盖在www目录下(www\css)的对应文件

自定义插件：

1.创建目录结构如下:

	myplugin

		src

			android

				myplugin.java

		www

			myplugin.js

		plugin.xml

调试

1. Ripple

   • 安装Ripple Emulator :
     
     npm install -g ripple-emulator
   • 启动Ripple :（进入cordova项目根目录）
     
     ripple emulate
   • 访问项目：
     
     启动Chrome浏览器 访问 http://localhost:4400/

2. Weinre

   • 安装 Weinre :
     
     npm -g install weinre

   • 端口设置：
     
     --httpPort 调试服务器运行的端口，默认的 8080，如果这个端口有在用，可以改为其它端口；
     
     --boundHost 调试服务器绑定的 IP 地址，也可以是域名，默认是 localhost

   • 启动
     
     weinre

   • 访问项目：（默认）
     
     http://localhost:8080/

示例项目

github - CordovaStudy