PhoneGap
什么是PhoneGap?
- PhoneGap是一个能够让Web开发者快速进行移动app开发的开源框架;
- PhoneGap主要涉及的技术:HTML5, CSS3, Javascript
- 跨平台, 利用PhoneGap进行移动开发,只需要做非常小的改动,就可以让程序在各种平台上运行:IOS, Android, Windows Phone
- PhoneGap开发的应用和传统方式(原生app)开发的应用效果基本一致,除了手机游戏。
PhoneGap能够干什么?
Accelerometer
设置设备屏幕的手势感应器
Camera
调用设备摄像头采集照片
Capture
使用设备的媒体应用程序调用媒体文件
Compass
获取设备移动的方向
Connection
迅速检查网络状况以及蜂窝网络的信息
Contacts
设备联系人相关操作
Device
获取设备相关信息
Events
通过javascript获取本地活动
File
通过javascript调用本地文件系统
Geolocation
使应用程序可以访问地理位置信息
Media
录制和播放音频文件
Notification
设备视觉、声音和触觉反馈
Storage
截获设备的本地存储选项
参考API:http://www.phonegapcn.com/docs/zh/cn/index.html
安装PhoneGap
命令:sudo npm install -g cordova
Cordova就是Apache基金会给PhoneGap取的一个新名字。历史缘由就是Adobe将PhoneGap核心代码贡献给了Apache基金会,现在Apache将Cordova作为一个顶级项目来运行。
Cordova 命令
创建应用程序
命令:cordova create hello com.example.hello HelloWorld
参数: - 第一个参数:指定目录名称 - 第二个参数:包名 - 第三个参数:应用程序的title
添加特定平台支持
进入项目路目录:
命令:
cordova platform add android
cordova platform add ios
移除Android平台支持:
cordova platform rm android
编译应用程序
命令: cordova build
添加插件支持
搜索可用的插件:
cordova plugin search bar code
安装插件:
cordovaplugin add org.apache.cordova.device //设备API
cordovaplugin add org.apache.cordova.network-information //网络(事件)
cordovaplugin add org.apache.cordova.battery-status //电池(事件)
cordovaplugin add org.apache.cordova.device-motion //加速器
cordovaplugin add org.apache.cordova.device-orientation //罗盘
cordovaplugin add org.apache.cordova.geolocation //定位
cordovaplugin add org.apache.cordova.camera //摄像头
cordovaplugin add org.apache.cordova.media-capture //媒体文件处理
cordovaplugin add org.apache.cordova.media //媒体文件处理
cordovaplugin add org.apache.cordova.file //文件访问
cordovaplugin add org.apache.cordova.file-transfer //文件传输
cordovaplugin add org.apache.cordova.dialogs //对话框
cordovaplugin add org.apache.cordova.vibration //震动
cordovaplugin add org.apache.cordova.contacts //联系人
cordovaplugin add org.apache.cordova.globalization //全球化
cordovaplugin add org.apache.cordova.splashscreen //闪屏
cordovaplugin add org.apache.cordova.inappbrowser //打开新的浏览器窗口
cordovaplugin add org.apache.cordova.console //调试控制台
查看已经安装的插件
cordova plugin ls
删除插件
cordova plugin rm org.apache.cordova.console
Merge 目录
一般情况下最好不要修改各自平台下的www目录下的文件。但是如果你确实需要为某个平台定制一些内容,又该怎么办呢?
项目根目录下有一个merges目录。我们以一个实例来讲解:
- 修改www\css目录下的index.css文件,设置event.received的样式为红色: background-color:#FF0000;
- 修改platforms\android\assets\www\css中的index.css文件,设置.event.received的样式为蓝色:background-color:#0000FF;
- 在merges\android目录下新建一个css目录。复制www\css中的index.css文件到该目录下。
- 修改该目录下的index.css文件中的.event.received的样式为绿色:background-color:# 00FF00;
仿真器中运行,你会发现最终呈现的结果为绿色。由此我们可知:
1) Merges目录中没有对应文件时,platform下的文件会被跟目录(www)下的文件覆盖。(即:如果Merges目录中不存在index.css文件,最终颜色将为红色)
2) Merges目录中存在对应文件时,platform下的文件会被merges下的文件覆盖。可见Merges目录主要用于为平台定制功能