Android H5混合開發(1):構建Cordova 項目


Cordova是什么

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


以移動平台為例,安卓、IOS平台設備的常用功能,被Apache封裝成一個個插件,如攝像頭、傳感器、網絡、數據等。H5端通過調用插件,即可使用設備的這些功能。而項目具體的業務功能,也可封裝成自定義的插件,供H5端調用,如:App端分享功能、支付功能、掃碼、定位、自定義鍵盤等。

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

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

更多信息,請參考官網:
https://cordova.apache.org/docs/en/latest/

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文件,配置環境變量.png
打開.bash_profile,配置環境變量(根據自己的目錄,修改即可),如下圖:
配置環境變量.png

2.Cordova環境

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

node.js是javascript的一種運行環境,是一個服務器端的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 執行命令安裝cordova:
sudo npm install -g cordova

2.2.3 執行命令安裝插件管理器:
sudo npm install -g plugman

注釋:
sudo OS X和Linux上的命令,可以被安裝在權限受限的目錄中(windows平台上去掉sudo即可)
-g 標志是告訴 npm 我們全局安裝 cordova;
為避免安裝時出現權限相關問題,也可先啟用超級用戶,命令:sudo -s ,這樣就可直接通過 npm install -g cordova進行安裝。

2.3 cordova環境驗證
打開終端,輸入以下命令,檢查cordova環境版本,如下圖:
cordova環境版本.png

更多環境配置信息,請參考官網:
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

創建Cordova項目

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

  1. 新建准備存放Cordova項目的目錄,我的本地目錄名:TestCordova
  2. 打開終端,進入TestCordova目錄
  3. 輸入創建項目的命令:
cordova create myapp com.qxc.app MyApp

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

項目創建成功,如下圖:
image.png
4. 添加Android平台
通過上圖,我們可以看到平台目錄中(plantforms)是空的,因為我們還沒有添加任何平台。
輸入進入項目目錄命令:

cd myapp

輸入添加android平台命令:

cordova platform add android --save

-- ios平台類似:cordova platform add ios --save

添加Android平台命令.png
添加Android平台成功后,項目目錄如下圖:
項目目錄.png

至此,項目創建完成。
安卓端開發,使用/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

Android H5混合開發(1):構建Cordova 項目
https://www.cnblogs.com/qixingchao/p/11654454.html

Android H5混合開發(2):自定義Cordova插件
https://www.cnblogs.com/qixingchao/p/11652418.html

Android H5混合開發(3):原生Android項目里嵌入Cordova
https://www.cnblogs.com/qixingchao/p/11652424.html

Android H5混合開發(4):構建Cordova Jar包
https://www.cnblogs.com/qixingchao/p/11652431.html

Android H5混合開發(5):封裝Cordova View, 讓Fragment、彈框、Activity自由使用Cordova
https://www.cnblogs.com/qixingchao/p/11652438.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM