利用Cordova开发移动应用程序

不少内容摘自易百教程

Hybrid App

简介

简介详情

混合型移动应用，是指一种介于Native App(本地原生应用)与Web App (网页应用)之间的应用，该类应用的开发除了使用到本地平台开发技术（Android、iOS、 BlackBerry等）外，部分功能还使用了Web技术，通过内嵌浏览器显示网页的方式来实现。

PhoneGap与Cordova

PhoneGap是一个使用Web技术（HTML，CSS和JavaScript）开发跨平台移动应用的免费且开源框架，目前很多主流的移动开发框架均源于PhoneGap，比如WeX5、appMobi、Worklight等。而要了解Cordova，得先了解一下PhoneGap的一些背景：
PhoneGap框架的起源于加拿大一家叫Nitobi的软件公司，08年一次iOS开发者大会上，该公司的几个人提出一个想法：Bridging the gap between the web and the iPhone sdk，想做一个工具来弥补Web和iOS开发之间的不足，这是PhoneGap名字的来源。
2011年10月，Adobe收购了创立PhoneGap项目的Nitobi公司，随后把PhoneGap项目捐给了Apache基金会，但Adobe保留了PhoneGap的商标所有权。故项目到了Apache旗下，改了个名字叫Apache Callback，因为名字毫无新意，后来又作了一次改名，即现在的Apache Cordova。Cordova是Nitobi团队当时坐落的街道名称，用此名来纪念Nitobi团队的贡献。
到此，我们差不多了解PhoneGap与Cordova之间的关系了：Cordova是Adobe公司把PhoneGap捐给Apache后新起的名字，它作为一个开源项目，是从PhoneGap中抽取出来的核心，Cordova与PhoneGap的关系就类似于WebKit与Chrome或Safari的关系。

安装之前的准备工作

安装node.js和npm

在node.js官网可以下载到编译好的安装包.
在.bashrc中配置NODE_HOME和PATH变量，比如

export NODE_HOME=/all/app/node/nodev4
export PATH=$NODE_HOME/bin:$PATH

然后source .bashrc使配置生效

Android SDK（对于Android平台）

JAVA_HOME当然也是要设置正确

.bashrc配置

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

版本问题

如果后边cordova build android 报错

You will require:
1. "SDK Platform" for android-21
2. "Android SDK Platform-tools (latest)
3. "Android SDK Build-tools" (latest)]

比如你目前的android SDK版本是22，需要修改以下两个文件

myApp/platforms/android/project.properties myApp/platforms/android/CordovaLib/project.properties

修改内容

# Project target.
target=android-22

修改AndroidManifest

<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="22" />

Android SDK Manager的使用

android studio里有，但是谷歌在墙外更新很卡，可以使用这个源android-mirror.bugly.qq.com
设置：tools->option。记得勾选Force那个，然后reload就行啦

别人说还需要git

不过这么好的东西估计大家都自带了～

安装Cordova

npm install -g cordova 

检查版本

cordova -v 

Cordova的使用

创建App

cordova create /all/myApp/app1 com.site app1

app路径：/all/myApp/app1
包名（按照官方建议使用自己的反向域名）：com.site
app名：app1

添加平台

执行命令后，它会自动下载相关依赖包。一个斜杠在那儿转，需要等很久，用代理会快一点

cordova platform add android

构建

如果无误会输出生成的apk地址

cordova build android

运行

cordova run android     #使用USB真实设备

cordova常用命令列表

命令 说明
cordova create <工程路径> <包名> <工程名> 创建cordova工程，例如：cordova create helloworld_prj "com.yiibai.helloworld" "helloworld"
cordova build android 给cordova项目添加android平台。
cordova run android 编译和运行项目。
cordova install android 将编译好的应用程序安装到模拟器上。
cordova plugin add <插件完全限定名> 给项目添加插件。
cordova plugin remove <插件完全限定名> 删除插件。
cordova plugin list 查看插件列表。
cordova platforms add android 添加平台支持。
cordova build android 编译代码
cordova emulate android 在模拟器上运行(前提是创建好AVD)
cordova serve android 在浏览器运行
cordova run android 通过USB直接安装到真机

构建自己的应用

在项目目录下有一个www目录，这是存放html和js文件的地方，有三个文件夹：css、js、img。index.html是打开app的那个界面。如果网站使用restful风格的api设计，转换过程将会非常简单。
这三个文件夹内的文件可以直接引用，比如

<script src="js/main/1.js"></script>

安装插件

比如下边,会很久，然后屏幕会打印超级多个省略号，真是怀疑出问题了，不过那个居然是进度条！！

cordova plugin add cordova-plugin-dialogs

在android上调试

在chrome中输入

chrome://inspect/#devices