Cordova+vue 混合app開發（一）建立Cordova項目

簡介：

• 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項目，我會一步一步的把我實際項目經驗，遇到的問題，以及經驗給你們分享一下，同時我會分享一下個人思路，感興趣的話，你們跟我一塊兒學習吧！