Cordova+vue 混合app開發（一）建立Cordova專案

蔡徐坤學前端發表於2020-05-15
VueAPP

簡介：

  • Cordova包裝你的HTML/JavaScript app到原生app容器中，可以讓你訪問每個平臺裝置的功能。這些功能通過統一的JavaScript API提供，讓你輕鬆的編寫一組程式碼執行在幾乎市面上的所有手機和平板上，並可以釋出到相應的app商城中。

 　　　　　　　　說白了cordova就是一個殼子，它可以把你的html程式碼打包生成app，釋出在不同平臺，同時訪問手機原生API，OK話不多說直接講解。

 

安裝Cordova

  • 　安裝node　　
    • 　　
    • 在官網根據自己對應的電腦型號下載對應的node。

 

    • 安裝完成之後控制檯分別輸入node -v   npm -v

 

分別輸出對應的版本號則表示安裝成功

  • 安裝Cordova　　
npm install -g cordova  //全域性下載安裝Cordova

cordova -v  //檢視是否安裝成功  輸出對應的版本號

 

  • 建立Cordova專案
cordova create MyApp    //Myapp 及你自己的專案名稱

此時就可以看到資料夾下多出一個。Myapp的檔案

cd Myapp  //進入當前專案
  • 新增平臺
這裡我們要新增專案執行的平臺

cordova platform add browser        //新增瀏覽器執行平臺
Cordova platform add ios --save     //新增ios執行平臺

Cordova platfrom add android --save //新增android執行平臺

這裡呢建議大家先新增一個 browser 即可，後續再逐步新增

cordova platform ls //檢視安裝的執行平臺


注意：執行ios或android需要安裝對應的sdk，後續會講到。

  • 執行app
cordova run 對應平臺

1.cordova run browser //執行瀏覽器

2.cordova run ios  //執行ios

3.cordova run android //執行android

 

 

我們執行 cordova run browser 會自動開啟埠為8080的頁面，此時你就成功的建立好了一個cordova專案。（歡呼）

 

 

Cordova目錄介紹

 

我們下載好之後會看到這個目錄檔案

 

 

myapp/
|-- config.xml
|-- hooks/
|-- merges/
| | |-- android/
| | |-- windows/
| | |-- ios/
|-- www/
|-- platforms/
| |-- android/
| |-- windows/
| |-- ios/
|-- plugins/
|--cordova-plugin-camera/

 

  • config.xml檔案分析
    配置應用屬性，包括webview初始化的引數，外掛的配置等。
  • www/
    Web的相關檔案，html、css、js等檔案。大多數的程式碼都在這個資料夾下。與config.xml檔案一樣會在根目錄下存在一個，在新增平臺後，會在平臺目錄下拷貝一份。通常情況下如果跨平臺開發，只修改根目錄下的檔案即可。版本控制時也需要跟蹤根目錄下的檔案。這裡呢我們以後會放置我們的vue專案，我下章會介紹到。
  • platforms/
    平臺程式碼。如果沒有必要不要修改這個資料夾下的內容，且這個檔案下的程式碼會在新增外掛後重置。
  • plugins/
    外掛目錄
  • hooks/
    命令列工具類，應該是個簡化工作的好幫手，<font color=#dd1234>有待學習</font>，但是在那之前要先學習一下js啊！累覺不愛！
    http://cordova.apache.org/docs/en/latest/guide/appdev/hooks/index.html
  • merges/
    針對不同平臺放置不同的hmtl/css/js檔案，由hooks檔案代替。
  • 版本控制
    推薦platforms/和plugins/資料夾不要納入版本控制中，config.xml和package.json中已經做了儲存，執行cordova prepare後會自動下載兩個資料夾下的內容。

 

總結：

我們本章使用到的命令：

1.node -v //檢查node版本

2.npm -v  //檢查npm版本

3.npm install -g cordova  //全域性下載安裝Cordova
4.cordova -v  //檢視是否安裝成功  輸出對應的版本號

5.cordova create MyApp    //Myapp 及你自己的專案名稱

6.cordova platform add 平臺名稱  //新增專案平臺

7.cordova run 對應平臺  //執行cordova專案


 

今天就到這裡，下章會講vue專案怎麼打包進Cordova，Cordova執行vue專案，我會一步一步的把我實際專案經驗，遇到的問題，以及經驗給大家分享一下，同時我會分享一下我的思路，感興趣的話，大家跟我一起學習吧！

 

相關文章