Cordova(PhoneGap)
创建步骤:官方Guide
- 环境准备
- 安装 Node.js
nodejs.org - 安装 git
git-scm.com (bin目录添加到path) - 安装 cordova
执行命令npm install -g cordova
- 安装 Node.js
- 创建,移除项目
- 执行命令
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/
- 安装Ripple Emulator :
- Weinre
安装 Weinre :
npm -g install weinre
端口设置:
--httpPort 调试服务器运行的端口,默认的 8080,如果这个端口有在用,可以改为其它端口;
--boundHost 调试服务器绑定的 IP 地址,也可以是域名,默认是 localhost启动
weinre访问项目:(默认)
http://localhost:8080/
示例项目
github - CordovaStudy