[譯] 使用Capacitor 和 Vue.js 構建移動應用

Vue · 發表 2018-12-11 14:12:22

摘要：通過本教程，你將學到如何使用 Capacitor 以及如 Vue.js、Ionic 4 web 元件等前沿 web 技術來為 Android 和 iOS 構建跨平臺移動應用。你還可以利用 Capacitor 的優勢，用相同的程式碼來構建其他平臺，比如桌面和 web。最近，Ionic 團...

通過本教程，你將學到如何使用 Capacitor 以及如 Vue.js、Ionic 4 web 元件等前沿 web 技術來為 Android 和 iOS 構建跨平臺移動應用。你還可以利用 Capacitor 的優勢，用相同的程式碼來構建其他平臺，比如桌面和 web。

最近，Ionic 團隊釋出了一項名叫Capacitor 且繼承了 Apache Cordova 和 Adobe PhoneGap 核心思想的開源專案。 Capacitor 允許你使用現代 web 技術來構建可在任意平臺中執行的應用，從 web 瀏覽器到移動裝置（Android 和 iOS），甚至是通過 Electron（Github 上比較流行的使用 Node.js 和前端 web 技術構建跨平臺桌面應用的技術）構建的桌面應用平臺。

Ionic - 最流行的混合移動應用開發框架 - 目前執行在 Cordova 之上，但在未來版本中，Capacitor 將成為 Ionic 應用的預設選擇。Capacitor 也提供了相容層從而允許在 Capacitor 專案中使用已有的 Cordova 外掛。

除了在 Ionic 應用中使用 Capacitor，你也可以使用任何你喜歡的前端框架或 UI 庫，比如 Vue、React、Angular with Material、Bootstrap 等。

在本教程中，我們將看到如何使用 Capacitor 和 Vue 來構建一個簡單的 Android 移動應用。實際上，如上所述，你的應用也可以作為漸進式 web 應用（PWA）或作為主要作業系統中的桌面應用來執行，這隻需要幾個命令。

我們還將使用一些 Ionic 4 UI 元件來設計我們的演示移動應用。

Capacitor 特性

Capacitor 擁有很多特性，以使其成為 Cordova 等其他解決方案的良好替代品。讓我們看看一些 Capacitor 特性：

開源並且免費 : Capacitor 是一個開源專案，根據 MIT 許可證授權，並由Ionic 和社群維護。
跨平臺 : 你可以使用 Capacitor 通過一份程式碼來構建多個平臺。你可以通過命令列介面（CLI）執行一些命令來支援另外一個平臺。
訪問平臺 SDK : 當你需要訪問原生 SDK 時，Capacitor 不會妨礙你。
標準 web 和瀏覽器技術 : 通過 Capacitor 構建的應用使用 web 標準 API，因此你的應用也將是跨瀏覽器，並將在遵循標準的所有現代瀏覽器中執行良好。
可擴充套件 : 可以通過新增外掛的形式來訪問底層平臺的原生功能，或者，如果你找不到符合你需求的外掛，可以通過簡單的 API 來建立一個自定義外掛。

依賴

為了完成本教程，你的開發機器需要滿足以下要求：

你需要在你的機器上安裝 Nodev8.6+ 和 npmv5.6+ 。只需訪問官網並且下載適用於你的作業系統的版本即可。
要構建 iOS 應用，你需要一臺安裝了 Xcode 的 Mac。
要構建 Android 應用，你需要安裝 Java 8 JDK 和帶有 Android SDK 的 Android Studio。

建立一個 Vue 專案

在這一節，我們將安裝 Vue CLI 並且生成一個新的 Vue 專案。然後，我們將使用 Vue router 為我們的應用程式新增導航。最後我們將使用 Ionic 4 元件構建一個簡單的 UI。

安裝 Vue CLI v3

讓我們首先通過命令列執行以下命令以便從 npm 安裝 Vue CLI v3：

$ npm install -g @vue/cli
複製程式碼

你可能需要新增sudo 來全域性安裝軟體包，具體取決於你的 npm 配置。

生成一個新的 Vue 專案

安裝完 Vue CLI，讓我們通過命令列執行以下命令用它來生成一下新的 Vue 專案：

$ vue create vuecapacitordemo
複製程式碼

你可以進入專案的根目錄並執行以下命令來啟動開發伺服器：

$ cd vuecapacitordemo
$ npm run serve
複製程式碼

你的前端應用將在http://localhost:8080/ 下執行。

如果你通過 web 瀏覽器訪問http://localhost:8080/ ，你應該看到一下頁面：

一個 Vue 應用 (檢視大版本)

新增 Ionic 4

為了在你的應用中使用 Ionic 4 元件，你需要通過 npm 安裝 Ionic 4 核心軟體包。

所以，繼續開啟index.html 檔案，它位於你的 Vue 專案中的public 目錄，然後在檔案頭部新增以下標籤<script src='https://unpkg.com/@ionic/[email protected]/dist/ionic.js'></script> 。

以下是public/index.html 的內容：

<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<linkrel="icon"href="<%= BASE_URL %>favicon.ico">
<title>vuecapacitordemo</title>
</head>
<body>
<noscript>
<strong>We’re sorry but vuecapacitordemo doesn’t work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<divid="app"></div>
<!-- built files will be auto injected -->
<scriptsrc='https://unpkg.com/@ionic/[email protected]/dist/ionic.js'></script>
</body>
</html>
複製程式碼

你可以通過npm 得到 Ionic 核心軟體包的當前版本。

現在，開啟src/App.vue ，刪除其中的內容後，在template 標籤內新增以下內容：

<template>
<ion-app>
<router-view></router-view>
</ion-app>
</template>
複製程式碼

ion-app 是一個 Ionic 元件。它應該是包裝其他元件的頂級元件。

router-view 是 Vue 的路由插槽。Vue router 將在此處呈現與路徑匹配的元件。

將 Ionic 元件新增到你的 Vue 應用後，你將開始在瀏覽器控制檯中收到類似以下內容的警告：

[Vue warn]: Unknown custom element: <ion-content> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/components/HelloWorld.vue
<App> at src/App.vue
<Root>
複製程式碼

這是因為 Ionic 4 元件實際上是 web 元件，所以你需要告訴 Vue 以ion 字首開頭的元件不是 Vue 元件。你可以在src/main.js 檔案中新增以下內容進行設定：

Vue.config.ignoredElements = [/^ion-/]
複製程式碼

現在這些警告應該消失了。

新增 Vue 元件

讓我們新增兩個元件。首先，刪除src/components 目錄下的所有檔案（並且刪除App.vue 中有關HelloWorld.vue 元件的任何匯入），然後新增Home.vue 和About.vue 檔案。

開啟src/components/Home.vue 並新增以下模板：

<template>
<ion-app>
<ion-header>
<ion-toolbar color="primary">
<ion-title>
Vue Capacitor
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content padding>
The world is your oyster.
<p>If you get lost, the <a href="https://ionicframework.com/docs">docs</a> will be your guide.</p>
</ion-content>
</ion-app>
</template>
複製程式碼

接下來，在同一個檔案中，新增以下程式碼：

<script>
export default {
name: 'Home'
}
</script>
複製程式碼

現在，開啟src/components/About.vue 並新增以下模板：

<template>
<ion-app>
<ion-header>
<ion-toolbar color="primary">
<ion-title>
Vue Capacitor | About
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
This is the About page.
</ion-content>
</ion-app>
</template>
複製程式碼

同樣的，在同一個檔案中，新增以下程式碼：

<script>
export default {
name: 'About'
}
</script>
複製程式碼

使用 Vue Router 新增導航

如果尚未安裝 Vue router，需要首先安裝，方法是在專案的根目錄中執行以下命令：

npm install --save vue-router
複製程式碼

然後，在src/main.js 檔案中，匯入以下內容：

import Router from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
複製程式碼

這將匯入 Vue router、Home 和 About 元件。

新增以下內容：

Vue.use(Router)
複製程式碼

建立一個包含路由陣列的Router 例項：

constrouter=newRouter({
routes: [
{
path:'/',
name:'Home',
component:Home
},
{
path:'/about',
name:'About',
component:About
}
]
})
複製程式碼

最後，告訴 VueRouter 例項：

newVue({router,
render:h=>h(App)
}).$mount('#app')
複製程式碼

現在我們已經設定了路由，讓我們新增一些按鈕和方法以便在 Home 和 About 兩個元件之間進行導航。

開啟src/components/Home.vue 並新增goToAbout() 方法：

...
export default {
name: 'Home',
methods: {
goToAbout () {
this.$router.push('about')
},
複製程式碼

在template 塊中，新增一個按鈕用來觸發goToAbout() 方法：

<ion-button @click="goToAbout" full>Go to About</ion-button>
複製程式碼

現在，當我們進入 About 元件時，我們需要新增一個按鈕返回到主頁。

開啟src/components/About.vue 並新增goBackHome() 方法：

<script>
export default {
name: 'About',
methods: {
goBackHome () {
this.$router.push('/')
}
}
}
</script>
複製程式碼

並且，在template 塊中，新增一個按鈕用來觸發goBackHome() 方法：

<ion-button @click="goBackHome()" full>Go Back!</ion-button>
複製程式碼

在真實的移動裝置或模擬器上執行該應用時，你會注意到縮放問題。要解決這個問題，我們需要簡單地新增一些正確設定 viewport 的meta 標籤。

開啟public/index.html ，將以下程式碼新增到頁面的head 中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
複製程式碼

新增 Capacitor

你可以通過兩種方式使用 Capacitor：

從頭開始建立一個新的 Capacitor 專案。
將 Capacitor 新增到已有的前端專案中。

在這篇教程中，我們將採用第二種方式，因為首先我們已經建立了一個 Vue 專案，現在我們將要把 Capacitor 新增到我們的 Vue 專案中。

整合 Capacitor 與 Vue

Capacitor 旨在融入任何現代 JavaScript 應用。要將 Capacitor 新增到 Vue web 應用中，你需要執行以下幾個步驟。

首先，通過 npm 安裝 Capacitor CLI 和核心軟體包。確保你在你的 Vue 專案中，並執行以下命令：

$ cd vuecapacitordemo
$ npm install --save @capacitor/core @capacitor/cli
複製程式碼

接下來，執行以下命令，使用你的應用資訊初始化 Capacitor：

$ npx cap init
複製程式碼

我們使用npx 執行 Capacitor 命令。npx 是npm v5.2.0 附帶的實用程式，它用來簡化託管在 npm 中的 CLI 程式和可執行檔案的執行。比如，它允許開發人員使用本地安裝的可執行檔案，而無需 npm 執行指令碼。

Capacitor CLI 的init 命令還將為 Capacitor 新增預設的本地原生平臺，比如 Android 和 iOS。

系統還會提示你輸入有關應用的資訊，比如名字、應用 ID（將主要用作 Android 應用的包名）和你的應用程式的目錄。

輸入所需的詳細資訊後，Capacitor 將被新增到你的 Vue 專案中。

你也可以通過以下命令來提供應用詳情：

$ npx cap init vuecapacitordemo com.example.vuecapacitordemo
複製程式碼

應用名為vuecapacitordemo ，ID 為com.example.vuecapacitordemo 。包名必須是有效的 Java 包名稱。

你應該會看到一條訊息， “Your Capacitor project is ready to go!”

你可能還注意到一個名為capacitor.config.json 的檔案被新增到了你的 Vue 專案的根目錄中。

就像 CLI 在我們的 Vue 專案中初始化 Capacitor 時所建議的那樣，我們現在可以新增我們想要構建的本地平臺。這將把我們的 web 應用轉換成我們新增的每個平臺的原生應用。

但是在新增平臺之前，我們需要告訴 Capacitor 在哪裡查詢構建檔案 — 也就是我們的 Vue 專案的dist 目錄。當你第一次執行 Vue 應用的build （npm run build ）命令時，將建立此目錄，它位於 Vue 應用的根目錄。

我們可以通過修改capacitor.config.json 中的webDir 來做到這一點，它是 Capacitor 的配置檔案。所以，只需用dist 替換www 即可。以下是capacitor.config.json 的內容：

{
"appId": "com.example.vuecapacitordemo",
"appName": "vuecapacitordemo",
"bundledWebRuntime": false,
"webDir": "dist"
}
複製程式碼

現在，讓我們建立dist 目錄並執行以下命令來構建我們的 Vue 專案：

$ npm run build
複製程式碼

之後，我們可以使用以下命令新增 Android 平臺：

npx cap add android
複製程式碼

如果你檢視你的專案，你會發現已經添加了一個android 原生專案。

這就是整合 Capacitor 和 Android 的全部內容。如果你想要適配 iOS 或 Electron，只需分別執行npx cap add ios 或npx cap add electron 。

使用 Capacitor 外掛

Capacitor 提供了一個執行時以便開發人員能夠使用 web 的三大支柱 - HTML、CSS 和 JavaScript - 來構建在 web 上以及主要桌面和移動平臺上執行的應用程式。另外它還提供了一組外掛用來訪問裝置的底層功能，例如相機，無需針對每個平臺使用特定的低階程式碼；該外掛將為你完成，併為此提供了統一規範的高階 API。

Capacitor 還提供了 API 以便你可以使用該 API 建立 Ionic 團隊提供的官方外掛未覆蓋的自定義外掛。你可以在如何建立外掛中學習。

你也可以在文件中找到有關API 和核心外掛的更多詳細資訊。

例子：新增一個 Capacitor 外掛

讓我們看一個在我們的應用中使用 Capacitor 外掛的例子。

我們將使用 “Modals” 外掛，該外掛用於顯示 alerts、confirmations、input prompts 和 action sheets 的原生模態視窗。

開啟src/components/Home.vue ，並在script 塊的開頭新增以下內容：

import { Plugins } from '@capacitor/core';
複製程式碼

此程式碼從@capacitor/core 中匯入Plugins 類。

接下來，新增以下方法來顯示對話方塊：

…
methods: {
…
async showDialogAlert(){
await Plugins.Modals.alert({
title: 'Alert',
message: 'This is an example alert box'
});
}
複製程式碼

最後，在template 塊裡新增一個按鈕用來觸發這個方法：

<ion-button @click="showDialogAlert" full>Show Alert Box</ion-button>
複製程式碼

以下是該對話方塊的螢幕截圖：

原生模態框 (檢視大版本)

你可以在文件找到更多詳細資訊。

為目標平臺構建應用

為了構建專案併為目標平臺生成相關二進位制檔案，你需要執行幾個步驟。讓我們首先看一下它們：

構建 Vue 應用的生產版本。
將所有 web 資源複製到 Capacitor 生成的原生專案中（在我們的示例中為 Android）。
在 Android Studio （或者 Xcode for iOS）中開啟你的 Android 專案，並使用本地整合開發環境（IDE）在真實裝置（如果已連線）或模擬器上構建和執行你的應用。

所以，執行以下命令來建立生產版本：

$ npm run build
複製程式碼

接下來，使用 Capacitor CLI 的copy 命令將 web 資源複製到原生專案：

$ npx cap copy
複製程式碼

最後，你可以使用 Capacitor CLI 的open 命令在本地 IDE（在我們的示例中為Android Studio）中開啟你的原生專案（在我們的示例中為Android）：

$ npx cap open android
複製程式碼

Android Studio 將與您的專案一起開啟，或將開啟包含原生專案檔案的目錄。

在 Android Studio 中開啟 Capacitor 專案 (檢視大版本)

如果不能開啟 Android Studio，那麼只需手動開啟你的 IDE，轉到 ”File“ → ”Open…“，然後導航到你的專案並從 IDE 中開啟android 目錄。

你現在可以使用 Android Studio 通過模擬器或真實裝置來啟動你的應用。

Capacitor demo 專案 (檢視大版本)