前言css
Apache Cordova是一個開源的移動開發框架。容許使用標準的web技術-HTML5,CSS3和JavaScript作跨平臺開發。 應用在每一個平臺的具體執行被封裝了起來,並依靠符合標準的API綁定去訪問每一個設備的功能,好比說:傳感器、數據、網絡狀態等。html
使用Apache Cordova的人羣:java
1.移動應用開發者,想擴展一個應用的使用平臺,而不經過每一個平臺的語言和工具集從新實現。android
2.web開發者,想包裝部署本身的web App將其分發到各個應用商店門戶。git
3.移動應用開發者,有興趣混合原生應用組建和一個WebView(一個特別的瀏覽器窗口) 能夠接觸設備A級PI,或者你想開發一個原生和WebView組件之間的插件接口。github
—— 摘自《Cordova官網》web
Cordova雖然能夠用來開發APP,但cordova並不能把H5代碼變成IOS或者Android的原生代碼。cordova只是將咱們的Html文件經過相應的API,顯示在HTML Rendering Engine(即WebView)中,同時 Cordova支持豐富的插件,這些插件提供了Cordova和原生組件相互通訊的接口並綁定到了標準的設備API上。這就使開發者能夠經過JS去調用原生代碼,好比:照相機、聯繫人、熱更新和打開第三方APP應用等。npm
接下來,本文會一步步的介紹如何使用Cordova開發咱們的第一個APP應用(本文主要介紹Android平臺應用,IOS平臺不作介紹)!json
使用Cordova的基本要求瀏覽器
1.首先要會基本的HTML + CSS + JS(不然的話你開發個毛線的app)
2.不須要過高深的android開發經驗,但起碼的開發流程要了解
3.須要自行搭建Android開發環境:好比SDK
4.須要下載安裝Node(自行百度)
5.須要安裝Cordova(npm install -g cordova)
建立APP
# cordova create <項目名> <包名> <app名(可選)>
cordova create cordova-study com.zyd.cordova
複製代碼
建立完成後的文件夾目錄結構:
hooks:存放自定義cordova命令的腳本文件。每一個project命令均可以定義before和after的Hook,好比:before_build、after_build
platforms:平臺目錄,各自的平臺代碼就放在這裏,能夠放一下平臺專屬的代碼
plugins:Cordova插件目錄,安裝的插件會放在這裏,cordova提供的原生API也是以插件的形式提供的
www:源代碼目錄。在cordova prepare的時候會被copy到各個平臺工程的assets\www目錄中
config.xml:主要是cordova的一些配置,好比:項目使用了哪些插件、應用圖標icon和啓動頁面
添加Android開發平臺
xx\cordova-study\platforms>cordova platform add android
Using cordova-fetch for cordova-android@~7.0.0
Adding android project...
Creating Cordova project for the Android platform:
Path: platforms\android
Package: com.zyd.cordova
Name: HelloCordova
Activity: MainActivity
Android target: android-26
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@7.0.0
Android Studio project detected
Android Studio project detected
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for android
This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version
, you do *not* need this plugin since the whitelist will be built in.
Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
--save flag or autosave detected
Saving android@~7.0.0 into config.xml file ...
複製代碼
注:cordova在添加平臺時,已自動安裝了一個白名單(cordova-plugin-whitelist)插件
導入Android Studio
File --> Open --> 選擇platforms-android下的build.gradle,肯定
等待IDE自動構建...
構建完成後的目錄結構以下:(我已切換到Android視圖模式,圖中箭頭位置)
目錄內容解釋:
AndroidManifest.xml:Android應用的入口文件,負責配置applaction和activity等
java:Java文件,當前主要爲Cordova項目默認的啓動類(通常不須要關心,除非涉及到使用原生代碼開發功能)
assets:資源文件(H5應用的html、js、css等文件),須要注意的是,www中的cordova開頭的文件或文件夾(若是使用到了自定義插件,會有個plugins文件目錄),切記不可刪除!切記不可刪除!切記不可刪除!
res:app的配置:啓動圖標、應用圖標、應用名稱等。注意:xml中的config.xml是app打包用的配置文件,可配置如:啓動主頁面、權限、白名單等
使用cordova打包APP
xx\platforms\android>cordova build android
Android Studio project detected
ANDROID_HOME=F:\AndroidSDK
JAVA_HOME=D:\server\Java\jdk1.8\jdk1.8.151
studio
Subproject Path: CordovaLib
Subproject Path: app
Starting a Gradle Daemon, 1 busy and 1 incompatible and 1 stopped Daemons could not be reused, use --status for details
publishNonDefault is deprecated and has no effect anymore. All variants are now published.
The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.
at build_dm9mufthcbtehnxb8j3px6xr.run(xx\platforms\android\app\build.gradle:143)
:CordovaLib:preBuild UP-TO-DATE
中間省略......
:app:cdvBuildDebug
BUILD SUCCESSFUL in 1m 1s
47 actionable tasks: 47 executed
Built the following apk(s):
xx\platforms\android\app\build\outputs\apk\debug\app-debug.apk
複製代碼
提示BUILD SUCCESSFUL則表示打包完成,根據指定路徑,獲取apk後安裝便可。
經常使用的命令:
cordova install android //將編譯好的應用程序安裝到模擬器上。
cordova emulate android //在模擬器上運行(前提是建立好AVD)
cordova serve android //在瀏覽器運行
cordova build android //打包cordova項目到android平臺。
cordova run android //經過USB直接安裝到真機(該語句已經包括了build命令)
複製代碼
使用AndroidStudio打包APP
參考資料
1.Cordova入門系列(一)建立項目
2.Cordova之如何用命令行建立一個項目(完整示例)
3.Cordova中文文檔
源碼地址
1.個人github
2.個人碼雲
歡迎關注,歡迎Star。固然,若是你直接下載了源碼並不star,我也沒辦法(手動滑稽o(╯╰)o)。
(編輯:雷林鵬 來源:網絡)