什麼是 cordova

cordova 是由 Apache 基金會支援的，使用 HTML5 + CSS3 + JS 來構建多平臺 APP 程式的開發框架。其支援呼叫手機系統（Android、IOS、Windows phone）原生 API，它可以將你寫的 Web 程式包裹進原生的 APP 殼中，也就是我們常說的 Hybrid APP （混合應用）。本文是一個前端開發者如何從 0 開始結合 Vue 來構建一個簡單的 APP.

第一步，安裝 cordova

安裝 cordova

cordova 提供一個可以全域性安裝的腳手架工具，我們使用 npm 來安裝，你的電腦還沒有 npm 的話，需要先安裝

npm install -g cordova

下載完之後，輸入 cordova -v 檢視是否成功安裝，出現相應的版本號則成功安裝。

建立 cordova 程式

安裝好之後，我們來新建一個 cordova 應用，在命令列輸入以下命令新建：

cordova create learn-cordova

其會在當前目錄下生成以下專案結構：

image

其中，我們重點關注 www 和 platforms 目錄，我們寫的 HTML/CSS/JS 程式碼就放在這個目錄下面，現在這個目錄下面已經有 cordova 為我們提供的示例專案程式碼。

platforms 是用來存放我們為相應的系統平臺打包的執行原始碼，它現在是空的，我們依次執行以下命令來新增相應的平臺：

cordova platform add android --save

cordova platform add ios --save

cordova platform add browser --save

新增完成之後，我們可以在 platforms 資料夾下面看到 android 和 ios 資料夾。我們可以使用下面這行命令來檢視我們已經新增的平臺和可以新增的全部平臺：

cordova platform

新增完平臺之後，我們可以使用 cordova run < platform >

image

如果你想檢視它在安卓平臺下的效果，則需要安裝配置 Android SDK 環境，包括 Java JDK 的安裝和環境變數配置， Android SDK 的安裝和環境變數配置。這個過程可以通過 Android studio 來更高效地安裝配置，當然，如果你的專案不涉及呼叫原生 API 的話，則可以直接下載 SDK Manager 管理工具來下載，進去依次點選 "Android SDK 工具"，在下拉選單中選擇 "SDK Tools"， 然後在表格中選擇相應的平臺所需的 SDK 包，建議直接下載 zip，下載完之後，在環境變數中配置（具體過程可以百度，很簡單）。

配置完成之後，在剛下載好的 SDK manager 中開啟 SDK Manager.exe 檔案，在開啟的介面中下載相應 API 級別的 SDK （推薦安裝 Android 8.0 級別）就可以了，其中 Tools 下面的前三項必須安裝，需要注意的是，這些 SDK 都比較大，準備好硬碟空間。

一切環境配置好之後，就可以通過 cordova run android 來除錯你的應用在 Android 系統下的表現了。

當然，你想打包出來 apk 可安裝檔案的話，也可以通過一行命令解決：

cordova build android

打包成功之後的安裝包可以在 "platforms → android → app → build → outputs → apk → debug" 下面找到。

以上就是一個簡單 APP 的打包過程。

如何打包 Vue 專案

如果我們已經編寫好了 Vue 專案，想把 Vue-cli 專案打包成一個 APP，該怎麼做呢？很簡單，把你的 Vue 專案資料夾移到和 cordova 專案同一級的位置（這不是必須，主要是好管理），如下：

image

放好之後，我們需要修改 Vue 專案的打包配置檔案：

config - index.js:

image

build - utils.js

image

其主要目的是將 Vue 專案的打包目錄設定我們我們 cordova 專案的 www 專案之下。

完成之後，在 vue 專案目錄下執行 npm run build 打包 vue 專案，完成之後，我們會發現 cordova 專案 www 資料夾下出現了我們打包出來的 dist 資料夾和 index.html 入口檔案。

我們回到 cordova 專案目錄，在其下執行 cordova build <platform name> 就可以打包出 vue 專案了。

以上就是使用 cordova 專案構建 APP 的基本過程，當然使用 cordova 的原因在於我們可以通過新增外掛來擁有 Web 開發不曾擁有的原生功能體驗，這些，通過學習多多嘗試。

注意：為了方便（不需要每次打包都發送apk到手機上），可以通過cordova serve android來啟動服務，使用者可以通過http://localhost:8000/android/www/index.html來請求android平臺下的頁面，也就是相當於手機訪問到的首頁，如此一來方便除錯了。

特別注意：請使用網路介面打包，本地資源路徑不太好寫，因為網路的已經好了也懶得用本地的了，哈哈。。。