浅谈Cordova优缺点与环境部署(转载)

浅谈Cordova优缺点与环境部署

作者:苏华杰

简介

Cordova是一个用基于HTML、CSS和JavaScript的,用于创建跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry等智能手机的核心功能——包括地理定位、加速器、联系人、声音和振动等,此外Cordova拥有丰富的插件,可以调用。

优缺点

时下流行的移动Web应用可分为三种:原生应用、Web应用和混合型应用。

  • 原生应用:通过各种应用市场安装,采用平台特定语言开发。
  • Web应用:通过浏览器访问,采用Web技术开发。
  • 混合型应用:通过各种应用市场安装,但采用Web技术开发。它虽然看上去是一个原生应用,但里面访问的实际上是一个Web应用。

原生应用的优势:

  1. 提供最佳的用户体验、最优质的用户界面和最华丽的交互;
  2. 针对不同平台提供不同体验;
  3. 可节省带宽成本;
  4. 可访问本地资源;
  5. 盈利模式明朗。

原生应用的劣势:

  1. 移植到不同平台上比较麻烦;
  2. 维护多个版本的成本比较高;
  3. 需要通过store或market确认;
  4. 盈利需要与第三方分成。

Web应用的优势如下:

  1. 开发成本低;
  2. 适配多种移动设备的成本低;
  3. 跨平台和终端;
  4. 迭代更新容易;
  5. 无需安装成本。

Web应用的劣势如下:

  1. 浏览体验短期内还无法超越原生应用;
  2. 不支持离线模式(HTML5将会解决这个问题);
  3. 消息推送不够及时;
  4. 调用本地文件系统的能力弱。

混合型应用可以说是为了弥补上面两种应用开发模式的缺陷而生,它是两者混合的产物,并且尽可能继承了双方的优势:

首先,它可以让众多Web开发人员几乎零成本地转型成移动应用开发者。

其次,相同的代码只需针对不同平台进行编译就能实现在多平台的分发,大大提高了多平台开发的效率。而相较于Web应用,开发者可以通过包装好的接口调用大部分常用的系统API。

作为本文所讲的Cordova,Cordova正是混合型框架中的佼佼者,它基于标准的Web技术——HTML、JavaScript和CSS,用JavaScript包装平台的API供开发者调用,具备强大的编译工具来为不同平台生成应用,同时拥有丰富的第三方资源和产业链。

PhoneGap在Web应用和设备之间搭建了一个通信的桥梁,封装了移动设备的平台差异,统一使用JavaScript接口访问设备本地API,以此提供了一个优秀的跨平台解决方案。

相信大家都对移动应用开发的框架使用已经有大概了解。接下来就讲述Cordova的环境部署。

用命令行的方式来部署Cordova:

1.安装 nodejs

下载:http://nodejs.org/download/.安装完毕后需要重启。

2.安装 cordova

打开cmd命令行,执行:npm install -g cordova

安装约10分钟。

浅谈Cordova优缺点与环境部署(转载)

3.安装 ant

下载ant包,解压到一个文件夹,如:D:\program files\apache-ant-1.9.4

配置该路径到环境变量中,此时若android sdk未配置环境变量的,一并配置。以防后面报错。

4.创建一个 cordova 工程

cordova create hello com.shj.helloworld helloapp

其中,第一个 hello 是文件夹的名称;om.shj.helloworld 是app id,第二个 helloapp是工程的名称,也是应用的名称。

提示下载库,请等待。

浅谈Cordova优缺点与环境部署(转载)

下载完成。

5.进入工程文件夹

cd hello

6.添加平台支持

有多种平台可选.命令如下:

$ cordova platform add ios
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos
$ cordova platform add wp7
$ cordova platform add wp8
$ cordova platform add windows8

此处选择cordova platform add android

在工程文件夹下输入该命令:

浅谈Cordova优缺点与环境部署(转载)

项目创建完毕。

7.添加插件支持

主要为系统硬件访问的插件,常见如照相机、媒体访问、设备访问、加速设备、定位设备等。可以动态的按需求去添加,譬如按以下方式添加,,更多插件请去cordova 官网查看。

基本设备资讯 (设备 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.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

8.构建应用

cordova build

浅谈Cordova优缺点与环境部署(转载)

若上图出现此命令需更新ant版本

浅谈Cordova优缺点与环境部署(转载)

上图出现该提示,BUILD成功。即将 hello/www 下的内容,构建到添加的各平台内。如 android 平台,会构建到此目录:hello\platforms\android\assets\www。

9.测试应用

A)在模拟器上安装测试应用

如android平台,应先将 android 模拟器启动并打开。

cordova emulate android

B)使用真机测试(推荐)

可使用如下命令:

cordova run android

C)在浏览器中运行

cordova serve android

D)使用 Ripple Emulator 调试

npm install -g ripple-emulator
ripple emulate

打包为发布的应用

打包android应用:借助 eclipse 来完成。

打开安装配置好 adt 插件的 eclipse ,使用向导导入一个 android 项目的方式,选择当前工程文件夹,此时会显示导入两个项目,导入即可。

浅谈Cordova优缺点与环境部署(转载)

浅谈Cordova优缺点与环境部署(转载)

项目成功导进来了。

浅谈Cordova优缺点与环境部署(转载)

接下来就可以把网页直接放到项目里面了。

先看PC直接打开网页的效果。

浅谈Cordova优缺点与环境部署(转载)

浅谈Cordova优缺点与环境部署(转载)

浅谈Cordova优缺点与环境部署(转载)

这是未修改配置的启动界面。也就是刚刚PC端打开的网页。网页就存在android项目asset目录下面。引用路径如上图所示file:///android_asset/www/index.html

通过360手机助手查看手机界面,可以看到刚刚的界面已经成功引导进去了。

浅谈Cordova优缺点与环境部署(转载)

在此Cordova的环境部署已经大功告成了。Web开发人员可以很轻易的开发移动应用了。更多详细的插件请查看官网,在此不一一细说了。

原文地址:http://express.ruanko.com/ruanko-express_74/technologyexchange6.html

上一篇:My Function Lib


下一篇:【斜率DP】BZOJ 1010:玩具装箱