Android H5混合開發（1）：構建Cordova 專案

摘要： Cordova是什麼 Apache Cordova是一個開源的移動開發框架。允許你用標準的web技術-HTML5,CSS3和JavaScript做跨平臺開發。 以移動平臺為例，安卓、IOS平臺裝置的常用功能，被Apache封裝成一個個外掛，如攝像頭、感測器、網路、資料等。H5端通過呼叫...

Cordova是什麼

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

以移動平臺為例，安卓、IOS平臺裝置的常用功能，被Apache封裝成一個個外掛，如攝像頭、感測器、網路、資料等。H5端通過呼叫外掛，即可使用裝置的這些功能。而專案具體的業務功能，也可封裝成自定義的外掛，供H5端呼叫，如：App端分享功能、支付功能、掃碼、定位、自定義鍵盤等。

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

Cordova的專案可包含多個平臺，各平臺操作自己的程式碼即可，與H5端通過外掛通訊：
www：H5的工作目錄
/platforms/android/：安卓專案的工作目錄
/platforms/ios/：IOS專案的工作目錄
....

Cordova環境

1.平臺環境

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

1.1 Java開發工具包(JDK)

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

1.2 Android SDK

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

1.3 設定環境變數 JAVA_HOME 和 ANDROID_HOME

為了使功能正常使用Cordova的CLI工具，需要設定一些環境變數。

以Mac平臺為例：

1.3.1 開啟終端Terminal
1.3.2 輸入建立命令(如果不存在)：touch .bash_profile
1.3.3 開啟檔案命令：open .bash_profile

開啟.bash_profile，配置環境變數（根據自己的目錄，修改即可），如下圖：

2.Cordova環境

安裝cordova命令列工具：

2.1 下載和安裝Node.js (地址： https://nodejs.org/en/download/ )。

安裝完成後你可以在命令列中使用 node 和 npm 。

2.2 安裝cordova 模組使用Nodejs的npm工具。

cordova模組會被npm工具自動下載。

2.2.1 開啟終端
2.2.2 輸入命令：sudo npm install -g cordova

-- sudo OS X和Linux上的命令，可以被安裝在許可權受限的目錄中(windows平臺上去掉sudo即可)
-- -g 標誌是告訴 npm 我們全域性安裝 cordova；

2.3 cordova環境驗證

開啟終端，輸入以下命令，檢查cordova環境版本，如下圖：

建立Cordova專案

接下來，我們使用Cordova開始搭建一個Cordova專案

1. 新建準備存放Cordova專案的目錄，我的本地目錄名：TestCordova
2. 開啟終端，進入TestCordova目錄
3. 輸入建立專案的命令：

cordova create myapp com.qxc.app MyApp

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

專案建立成功，如下圖：

4. 新增Android平臺

   通過上圖，我們可以看到平臺目錄中（plantforms）是空的，因為我們還沒有新增任何平臺。

   輸入進入專案目錄命令：

cd myapp

輸入新增android平臺命令：

cordova platform add android --save

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

新增Android平臺成功後，專案目錄如下圖：

至此，專案建立完成。

安卓端開發，使用/platforms/android目錄；

IOS端開發，使用/plantforms/ios目錄；（當前示例demo沒有新增）

H5端開發，使用www目錄；

具體安卓與H5端如何通訊，我們後續再介紹。

測試Android專案

1. 啟動AndroidStudio，開啟專案/platforms/android。

2. 根據本地Gradle版本（我的是3.3和3.5），修改專案的Gradle。

   開啟專案的/gradle/wrapper/gradle-wrapper.properties檔案，修改gradle版本：

   

   修改gradle版本.png

3. 編譯專案（如果編譯有問題，一般是Gradle版本的問題，請根據本地gradle進行調整）

4. 執行到手機

   

   執行效果.jpg