Cordova學習筆記之入門


前言

前后學習Cordova也有幾個月的時間了,是時候把學到的知識和經驗總結一下。之前完全沒有接觸過移動開發,也沒有接觸過Hybrid App,只是一枚純純的web前端,沒想到剛進公司接到的第一個項目竟然不是傳統的web,而是讓我獨立開發一個App,當時整個人是懵逼的,而且也沒有人帶,一切只能靠自己,還好磕磕絆絆一路也這么走過來了...

正文

1.安裝Nodejs和NPM

這一步真的不需要我教了吧,如果這兩個還不知道請你放棄前端吧!

2.安裝Cordova

非常容易,直接 npm i -g cordova 就OK了

3.創建Cordova項目

cordova create hello com.hello.world

執行該命令創建了一個名為hello的cordova項目

4.添加開發平台

cordova platform add android --save

添加Android平台,如果是iOS則換成

cordova platform add ios --save

該命令會獲取默認的平台版本並保存該版本到配置文件(--save),如果想指定版本可以

cordova platform add android@6.1.0 --save

其它支持的平台還包括windows phone, blackberry等等,具體見官網文檔

羅列已添加的平台

cordova platform ls

5.添加插件

先說說什么是插件,我們知道,cordova是一種Hybrid App,所以基本上大多數的開發方式和web開發是一致的,就是直接操作瀏覽器就好了,可是我們是要開發一款類似原生的App,如果有涉及原生操作的需求怎么辦,例如修改啟動頁圖片,修改狀態欄,獲取設備信息等等,這些瀏覽器層面是無法幫我們做到的,因此這時就得通過cordova的插件機制來實現了。所謂的插件,其實就是原生API與瀏覽器之間的一座橋梁而已,cordova通過瀏覽器(例如android的webview)暴露原生API接口給Javascript調用,具體怎么實現有興趣可以自己去深入了解。

以狀態欄插件為例,添加插件

cordova plugin add cordova-plugin-statusbar --save

羅列出已安裝的插件

cordova plugin ls

6.Cordova項目結構

一般的cordova項目結構如下

node_modules目錄、package.json、gulpfile.js等就不用說了

platforms是已安裝平台目錄

platforms是已安裝插件目錄

www就是你主要的工作目錄了,所有的html,css,js都在這里,默認cordova一啟動就會加載www/index.html頁面

7.打包Cordova應用

好了,現在嘗試修改一下www/index.html,然后執行

cordova prepare android

cordova build android

OK了,如果命令行無錯誤信息的話就會在/platforms/android/build/outputs/apk目錄下會生成一個apk,把它安裝到你的手機試試看吧!

TIPS:

如果有錯誤信息,以下是一些通用的解決方法(不一定管用)

清理項目

cordova clean 

或者重新添加平台

cordova platform remove android --save

cordova platform add android --save

 

結尾

基本上一個Cordova應用過程就是醬紫了,有一點要注意,每次在www目錄下做的所有的修改,生成應用前都要先 cordova prepare [platform] 一遍再build

補充一點,以上前提是你已經擁有某個平台的開發環境,例如Android開發環境搭建好的前提下,才可能打包出APK


免責聲明!

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



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