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

時間  2019-11-16
標籤 使用 capacitor vue.js vue 構建 移動 應用 欄目 JavaScript 简体版
原文   原文鏈接

經過本教程，你將學到如何使用 Capacitor 以及如 Vue.js、Ionic 4 web 組件等前沿 web 技術來爲 Android 和 iOS 構建跨平臺移動應用。你還能夠利用 Capacitor 的優點，用相同的代碼來構建其餘平臺，好比桌面和 web。html

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

Ionic - 最流行的混合移動應用開發框架 - 目前運行在 Cordova 之上，但在將來版本中，Capacitor 將成爲 Ionic 應用的默認選擇。Capacitor 也提供了兼容層從而容許在 Capacitor 項目中使用已有的 Cordova 插件。vue

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

在本教程中，咱們將看到如何使用 Capacitor 和 Vue 來構建一個簡單的 Android 移動應用。實際上，如上所述，你的應用也能夠做爲漸進式 web 應用（PWA）或做爲主要操做系統中的桌面應用來運行，這隻須要幾個命令。android

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

Capacitor 特性

Capacitor 擁有不少特性，以使其成爲 Cordova 等其餘解決方案的良好替代品。讓咱們看看一些 Capacitor 特性：git

  • 開源而且免費: Capacitor 是一個開源項目，根據 MIT 許可證受權，並由 Ionic 和社區維護。
  • 跨平臺: 你可使用 Capacitor 經過一份代碼來構建多個平臺。你能夠經過命令行界面（CLI）運行一些命令來支持另一個平臺。
  • 訪問平臺 SDK: 當你須要訪問原生 SDK 時，Capacitor 不會妨礙你。
  • 標準 web 和瀏覽器技術: 經過 Capacitor 構建的應用使用 web 標準 API，所以你的應用也將是跨瀏覽器，並將在遵循標準的全部現代瀏覽器中運行良好。
  • 可擴展: 能夠經過添加插件的形式來訪問底層平臺的原生功能，或者，若是你找不到符合你需求的插件，能夠經過簡單的 API 來建立一個自定義插件。

依賴

爲了完成本教程，你的開發機器須要知足如下要求：github

  • 你須要在你的機器上安裝 Node v8.6+ 和 npm v5.6+ 。只需訪問 官網 而且下載適用於你的操做系統的版本便可。
  • 要構建 iOS 應用，你須要一臺安裝了 Xcode 的 Mac。
  • 要構建 Android 應用，你須要安裝 Java 8 JDK 和帶有 Android SDK 的 Android Studio。

建立一個 Vue 項目

在這一節，咱們將安裝 Vue CLI 而且生成一個新的 Vue 項目。而後，咱們將使用 Vue router 爲咱們的應用程序添加導航。最後咱們將使用 Ionic 4 組件構建一個簡單的 UI。web

安裝 Vue CLI v3

讓咱們首先經過命令行運行如下命令以便從 npm 安裝 Vue CLI v3：vue-router

$ 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 應用

一個 Vue 應用 (查看大版本)

添加 Ionic 4

爲了在你的應用中使用 Ionic 4 組件，你須要經過 npm 安裝 Ionic 4 核心軟件包。

因此，繼續打開 index.html 文件，它位於你的 Vue 項目中的 public 目錄，而後在文件頭部添加如下標籤 <script src='https://unpkg.com/@ionic/core@4.0.0-alpha.7/dist/ionic.js'></script>。

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

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8">
<meta  http-equiv="X-UA-Compatible"  content="IE=edge">
<meta  name="viewport"  content="width=device-width,initial-scale=1.0">
<link  rel="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>
<div  id="app"></div>
<!-- built files will be auto injected -->
<script  src='https://unpkg.com/@ionic/core@4.0.0-alpha.7/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 實例：

const  router  =  new  Router({
  routes: [
    {
      path:  '/',
      name:  'Home',
      component:  Home
    },
    {
      path:  '/about',
      name:  'About',
      component:  About
    }
  ]
})
複製代碼

最後，告訴 Vue Router 實例：

new  Vue({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>
複製代碼

如下是該對話框的屏幕截圖：

Capacitor 原生模態框

原生模態框 (查看大版本)

你能夠在 文檔 找到更多詳細信息。

爲目標平臺構建應用

爲了構建項目併爲目標平臺生成相關二進制文件，你須要執行幾個步驟。讓咱們首先看一下它們：

  1. 構建 Vue 應用的生產版本。
  2. 將全部 web 資源複製到 Capacitor 生成的原生項目中（在咱們的示例中爲 Android）。
  3. 在 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 項目

在 Android Studio 中打開 Capacitor 項目 (查看大版本)

若是不能打開 Android Studio，那麼只需手動打開你的 IDE，轉到 」File「 → 」Open…「，而後導航到你的項目並從 IDE 中打開 android 目錄。

你如今可使用 Android Studio 經過模擬器或真實設備來啓動你的應用。

Capacitor demo 項目

Capacitor demo 項目 (查看大版本)

結論

在本教程中，咱們使用了帶有 Vue 和 Ionic 4 web 組件的 Ionic Capacitor 建立了一個使用 web 技術的移動 Android 應用。你能夠在 GitHub repository 中找到該演示應用的源代碼。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程