H5程序員如何利用cordova開發跨平台應用


什么是Cordova?

Cordova以前也叫PhoneGap,它提供了一組設備相關的API,通過這組API,移動應用能夠以JavaScript訪問原生的設備功能,如攝像頭、麥克風等。Cordova還提供了一組統一的JavaScript類庫,以及為這些類庫所用的設備相關的原生后台代碼,簡而言之,cordova就是連接H5和原生系統的橋。通過cordova就可以在H5頁面上開發出類似原生APP的應用,而且還是跨平台的。

在windows上如何搭環境搭

1. 首先安裝node.js.

不要被這個nodejs嚇住了,其實只不過是用它來安裝cordova而已。下載對應平台的版本,一路下一步就完成了安裝。

裝完之后在命令行窗口輸入下面的命令驗證一下,如果能看到圖示字樣則表示安裝成功:

1
2
3
node - v 
 
npm - v

  

2.  下面開始安裝cordova

 

按照官方的安裝方式:npm install -g cordova 可以安裝成功,不過可能有點慢。我這里推薦淘寶npm鏡像加速,在命令行下輸入:

1
npm  install  -g cnpm --registry=https: //registry .npm.taobao.org

稍等片刻就可以安裝完npm鏡像,然后用cnpm -v 能查看到版本號,是表示安裝成功

接下來在命令行中輸入cnpm install cordova -g,耐心等待...

出現這個提示,說明cordova已經安裝好了。接下來創建一個android的app來試試。

為了開發一個能在android上運行的app,需要做一堆的小工作,需要有點耐心。其間可能因為網絡被牆的原因,會下載失敗,不過網上都有對應的解決方法。下面開始搭建這些附屬的環境。

3. 安裝jdk

先點擊Accept License Agreement 然后下載所需的版本。安裝很簡單,如果安裝默認方式安裝,則只需要一路點下一步就好了。

然后添加環境變量:我的電腦-->右鍵屬性 --> 系統高級設置-->高級-->環境變量-->如圖所示:

接着在Path中添加如下代碼,點擊這里進行詳情介紹.

1
.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

最后安裝adt-bundle-windows ,它里邊集成了sdk和eclipse,省了不少事。考慮到被牆,我這里就直接貼別人的處理方法。詳情點擊

解壓出來,復制sdk的路徑,加入環境變量。具體的操作和前面類似,我就不重復了,詳情點擊.

雙擊sdk manager.exe 開始更新,由於被牆的原因,很可能更新失敗,(可惡的GFW,fk....). 這里貼上網友的解決方案,詳情點擊

需要鈎選sdk-tools,platform-tools,build-tools,如果要模擬器,還要鈎一個Android api ,如果搞不懂哪些是必需的,就多鈎幾個。比較慢,下載下來有幾十個G。

網上還有說要安裝Ant , 也有說cordova 6.0以后,都換了build工具了,不知道是真是假,反正我都裝了。這里要注意,Ant1.9.x之后的zip包,並不像網上的貼子說的那樣,復制bin目錄到環境變量,而是要先在命令行下輸入build.bat,進行構建,最后會生成build和dist目錄,這個dist目錄,及下面的lib,bin才是真正要加到環境變量中的內容。我曬一下win10上的效果圖:

 

好了,現在我們可以開始進入最有創造性的內容了。打開命令行,開始我的第一個HelloWorld

1
2
3
4
5
cordova create hello com.example.hello HelloWorld
 
cd  hello
 
cordova platform add android

如果提示build SUCCESS那么恭喜,編譯成功!!

如果出現下面的畫面,則表示有sdk或依賴的包沒有安裝

我就多次被卡在這個"Failed to install cordova-plugin-whitelist' 百度一圈無果,果斷google, stackoverflow, 如果沒有添加任何cordova插件就報這個錯誤,肯定是少打了鈎,再去鈎一圈加來,一般就可以順利通過了。

提示我Android SDK platform 24那么我就把24的都鈎上,這樣總行了吧。有點慢,不過好在沒有報錯了。

接上手機(也可以在sdk manager中添加虛擬機)看看運行效果。手機需要在開發模式中鈎選允許調式,然后手機上允許這台計算機連接。然后就輸下面的命令:

cordova run 

如果不出意外,你的手機上就會生成一個叫hello的應用,啟動之后就是一個cordova的logo. 接下來就是常規的h5開發,如果有用過eclipse的話,可以通過它進行調試,我先做一個簡單的,直接用sublimeText進行編寫。找到hello目錄里邊的www,那里是整個h5的根目錄,每次運行cordova build 或 run都會用到這里邊的文件。

如果要訪問原生系統提供的功能,需要用到cordova的插件,比如調用系統對話框來代替alert彈窗,就需要先安裝cordova的Dialog插件,比起前面的操作,這個簡單,通常不會遇到問題。這里有官方例子. 寫的有點羅嗦,簡單一句話就是: cordova plugin add 插件名 或git地址

完了之后,就可以在js中使用了,具體的使用方法參考插件官方的說明。

前面說安裝插件可能不會有問題,但是當你重新cordova build的時候,可能就會報錯了,比如:

1
2
3
4
You have not accepted the license agreements of the following SDK components:
[Android Support Repository].
Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Manager.
Alternatively, to learn how to transfer the license agreements from one workstation to another, go to http: //d .android.com /r/studio-ui/export-licenses .

  說什么鬼協義沒有接受,搞半天也沒有弄懂,反正我安裝sdk的都是點了aceept的,不點也不讓安裝啊,真是不明白。留着以后慢慢研究,如果有這方面的解決方法,請告訴我一下,謝謝。【PS:終於找到這個問題的解決方法。其實錯誤提示中寫的很清楚,第一行就寫了SDK Manager中鈎選缺失的擴展組件就好。是我那天過於急燥,沒有看清】還有一個問題沒有很好的解決,在js中的對象用console.log在eclipse中看不到,只有一個[object object].目前沒有很好的辦法,想到可能的方法就是把對象轉成json字符串或遍厲出來再打印。或用npm -g install weinre這樣的遠程調式工具(現在有點過時了);更好的方式是使用google瀏覽器自帶的工具,詳情請點擊 需要自備梯子哦

 

導入Eclipse

在命令行下啟動完app之后,沒有任何輸出提示,這顯然不方便調試。所以需要將項目導入進eclipse進行調式,導入方法很簡單,沒有太多講究,右鍵選擇導入--> android 已存在的項目就好了

 

總結

  通過不斷的折騰,總算是在手機上運行成功了。最大困難可能是前面的環境搭建,一方面是網絡被牆,一方面是需要對android/ios這方面的配置有一定知識儲備。遇到困難不要慌,不斷的搜索,去官方看看文檔,錯誤提示。一個問題一個問題的解決,完成的時候,就會收獲一份成功的喜悅。


免責聲明!

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



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