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