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