Cordova是什么

Apache Cordova是一個開源的移動開發(fā)框架。允許你用標準的web技術-HTML5,CSS3和JavaScript做跨平臺開發(fā)。


以移動平臺為例，安卓、IOS平臺設備的常用功能，被Apache封裝成一個個插件，如攝像頭、傳感器、網(wǎng)絡、數(shù)據(jù)等。H5端通過調(diào)用插件，即可使用設備的這些功能。而項目具體的業(yè)務功能，也可封裝成自定義的插件，供H5端調(diào)用，如：App端分享功能、支付功能、掃碼、定位、自定義鍵盤等。

Cordova提供了完整的機制，使得H5、安卓、IOS等平臺混合開發(fā)不再復雜。

Cordova的項目可包含多個平臺，各平臺操作自己的代碼即可，與H5端通過插件通信：
   www：H5的工作目錄
   /platforms/android/：安卓項目的工作目錄
   /platforms/ios/：IOS項目的工作目錄
   ....

更多信息，請參考官網(wǎng)：
https://cordova.apache.org/docs/en/latest/

Cordova環(huán)境

1.平臺環(huán)境

用Cordova構建和運行App，需要安裝每個你需要平臺的SDK，以安卓為例：

1.1 Java開發(fā)工具包(JDK)

安裝[Java Development Kit (JDK) 7]或者最新的版本

1.2 Android SDK

安裝[Android Stand-alone SDK]或者[Android Studio]

1.3 設置環(huán)境變量 JAVA_HOME 和 ANDROID_HOME
為了使功能正常使用Cordova的CLI工具，需要設置一些環(huán)境變量。
以Mac平臺為例：

1.3.1 打開終端Terminal
1.3.2 輸入創(chuàng)建命令(如果不存在)：touch .bash_profile
1.3.3 打開文件命令：open .bash_profile

打開bash_profile文件，配置環(huán)境變量.png

打開.bash_profile，配置環(huán)境變量（根據(jù)自己的目錄，修改即可），如下圖：

配置環(huán)境變量.png

2.Cordova環(huán)境

安裝cordova命令行工具：
2.1 下載和安裝Node.js (地址：https://nodejs.org/en/download/)。
安裝完成后你可以在命令行中使用node 和 npm 。

node.js是javascript的一種運行環(huán)境，是一個服務器端的javascript的解釋器。
npm其實是Node.js的包管理工具（package manager）。
nodejs中包含npm，安裝完成nodejs，npm也就安裝好了。

通過命令node --version  可查看nodejs版本；
通過命令npm --version  可查看npm版本；

2.2 安裝cordova 模塊使用Nodejs的npm工具。
cordova模塊會被npm工具自動下載。

2.2.1 打開終端

2.2.2 執(zhí)行命令安裝cordova：
sudo npm install -g cordova

2.2.3 執(zhí)行命令安裝插件管理器：
sudo npm install -g plugman

注釋：
sudo OS X和Linux上的命令，可以被安裝在權限受限的目錄中(windows平臺上去掉sudo即可)
-g 標志是告訴 npm 我們?nèi)职惭b cordova；
為避免安裝時出現(xiàn)權限相關問題，也可先啟用超級用戶，命令：sudo -s ，這樣就可直接通過 npm install -g cordova進行安裝。

2.3 cordova環(huán)境驗證
打開終端，輸入以下命令，檢查cordova環(huán)境版本，如下圖：

cordova環(huán)境版本.png

更多環(huán)境配置信息，請參考官網(wǎng)：
https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
https://cordova.apache.org/docs/en/latest/guide/cli/index.html

plugman工具用于管理插件，如查看插件列表、新增插件、刪除插件、添加到指定平臺等。

plugman create --name ....
cordova plugin remove....
cordova plugin list
plugman platform add --platform_name android

創(chuàng)建Cordova項目

接下來，我們使用Cordova開始搭建一個Cordova項目

1. 新建準備存放Cordova項目的目錄，我的本地目錄名：TestCordova
2. 打開終端，進入TestCordova目錄
3. 輸入創(chuàng)建項目的命令：

cordova create myapp com.qxc.app MyApp

-- myapp 目錄名稱
-- com.qxc.app 包名/工程id
-- MyApp 項目名稱

項目創(chuàng)建成功，如下圖：

image.png

4. 添加Android平臺
   通過上圖，我們可以看到平臺目錄中（plantforms）是空的，因為我們還沒有添加任何平臺。
   輸入進入項目目錄命令：

cd myapp

輸入添加android平臺命令：

cordova platform add android --save

-- ios平臺類似：cordova platform add ios --save

添加Android平臺命令.png

添加Android平臺成功后，項目目錄如下圖：

項目目錄.png

至此，項目創(chuàng)建完成。
安卓端開發(fā)，使用/platforms/android目錄；
IOS端開發(fā)，使用/plantforms/ios目錄；（當前示例demo沒有添加）
H5端開發(fā)，使用www目錄；

具體安卓與H5端如何通信，我們后續(xù)再介紹。

測試Android項目

1. 啟動AndroidStudio，打開項目/platforms/android。

2. 根據(jù)本地Gradle版本（我的是3.3和3.5），修改項目的Gradle。
   打開項目的/gradle/wrapper/gradle-wrapper.properties文件，修改gradle版本：

   
   
   修改gradle版本.png
3. 編譯項目（如果編譯有問題，一般是Gradle版本的問題，請根據(jù)本地gradle進行調(diào)整）

4. 運行到手機

   
   
   運行效果.jpg

第一篇：Android H5混合開發(fā)（1）：構建Cordova 項目

http://www.itdecent.cn/p/058a0dd7f809

第二篇：Android H5混合開發(fā)（2）：自定義Cordova插件

http://www.itdecent.cn/p/8fcbf06a4c3a

第三篇：Android H5混合開發(fā)（3）：原生Android項目里嵌入Cordova

http://www.itdecent.cn/p/e306ae0f1f03

第四篇：Android H5混合開發(fā)（4）：構建Cordova Jar包

http://www.itdecent.cn/p/447d41a1299d

第五篇：Android H5混合開發(fā)（5）：封裝Cordova View

http://www.itdecent.cn/p/13a0fbaa3227