Cordova(PhoneGap)

創建步驟：官方Guide

環境準備

安裝 Node.js
nodejs.org

安裝 git
git-scm.com (bin目錄添加到path)

安裝 cordova
執行命令 npm install -g cordova

創建,移除項目

執行命令
cordova create CordovaStudy xy.study.cordova CordovaStudy
參數：

• CordovaStudy: 指定項目的文件夾名為CordovaStudy，Cordova會自動創建該文件夾
• xy.study.cordova: 指定項目的包名
• CordovaStudy: 指定項目名

添加平臺 (需要先配置好相應的SDK)

cordova platform add ios

cordova platform add android(需要先配置ANDROID_HOME)

刪除平臺

cordova platform remove android

cordova platform rm ios

運行項目(需要安裝ant ANT_HOME)

構建應用

• 執行命令:cordova build

• 或者指定平臺:cordova build android

  cordova build android
  相當于執行了cordova prepare android 和 cordova compile android

運行應用

執行命令:cordova emulate android

該命令重新生成該應用并在模擬器上運行

執行命令:cordova run android

該命令用于在真機上運行

插件的添加

插件搜索:

執行命令:cordova plugin search bar code

參數:bar,code 均為搜索的關鍵字

添加插件:

執行命令:
cordova plugin add org.apache.cordova.console(可以接多個插件，空格分隔)

查看已安裝的插件

執行命令:cordova plugin ls

刪除插件:

執行命令:cordova plugin remove org.apache.cordova.console (可以接多個插件，空格分隔)

多平臺修改

根目錄下創建文件夾merges

merges下創建相應平臺的文件夾，及要修改的對應的文件

eg. merges/androids/css/overrides.css

此文件就會覆蓋掉 www/css/overrides.css

其他命令

• 幫助: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

不同平臺生成不同的代碼的處理方式

項目的根目錄下創建merges文件夾

merges文件夾下創建要對應平臺的文件夾（eg:android）

在對應平臺目錄(merges\android)下編寫對應平臺的特定內容

eg: css , 創建css文件夾，css文件。

該文件會在生成指定平臺應用時（build），自動覆蓋在www目錄下(www\css)的對應文件

自定義插件：

1.創建目錄結構如下:mypluginsrcandroidmyplugin.javawwwmyplugin.js plugin.xml

調試

Ripple

• 安裝Ripple Emulator :
  npm install -g ripple-emulator
• 啟動Ripple :（進入cordova項目根目錄）
  ripple emulate
• 訪問項目：
  啟動Chrome瀏覽器 訪問 http://localhost:4400/

Weinre

• 安裝 Weinre :
  npm -g install weinre

• 端口設置：
  --httpPort 調試服務器運行的端口，默認的 8080，如果這個端口有在用，可以改為其它端口；
  --boundHost 調試服務器綁定的 IP 地址，也可以是域名，默認是 localhost

• 啟動
  weinre

• 訪問項目：（默認）
  http://localhost:8080/

示例項目

github - CordovaStudy

轉載于:https://www.cnblogs.com/final-elysion/p/5980852.html

總結

以上是生活随笔為你收集整理的Cordova(PhoneGap) 环境搭建与基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。