ionic vue

Posted 2020-12-20 johnjackson

原文 

ionic 现在已经正式支持vue了（而且是3）

全局安装或升级ionic-cli:

npm install -g @ionic/cli@latest

然后就可以创建项目了，跟之前用ionic创建angular项目差不多，以项目名myApp为例：

ionic start myApp blank --type vue

注，如果直接执行ionic start 会以交互的方法创建项目，可以指定项目名，项目模板类型（tabs, sidemenu, blank, list），框架类型 angular、react、vue。

创建好项目后进入项目目录：

cd myApp

启动项目（启动开发服务器，并自动打开默认浏览器打开项目首页）：

ionic serve

项目的源码都在src，入口文件是main.ts，（实际生成的main.ts内容比下面多）

import { createApp } from ‘vue‘; //createApp函数使我们可以初始化Vue应用程序
import { IonicVue } from ‘@ionic/vue‘; //IonicVue是一个插件，允许我们在Vue环境中使用Ionic Framework

import App from ‘./App.vue‘; //是导入我们应用程序的根组件，将会用做启动组件
import router from ‘./router‘;  // 导入获取我们的路由配置，./router/index.ts

const app = createApp(App)
  .use(IonicVue)
  .use(router);

router.isReady().then(() => {
  app.mount(‘#app‘);
});

 

打开，App.vue我们将看到以下内容：

<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

<script lang="ts">
import { IonApp, IonRouterOutlet } from ‘@ionic/vue‘; 导入两个ionic-vue组件，就是上面template中的ion-app和ion-router-outlet
import { defineComponent } from ‘vue‘;

//defineComponent 是vue3提供的新的函数，用于创建组件
export default defineComponent{
  name: ‘App‘,   //当前组件的名称
  components: {  //当前组件模板中用到的组件
    IonApp,         
    IonRouterOutlet
  }
  //这里还可以写methods、setup等参数，参考Composition API文档。
};
</script>

 

Ionic Vue使用vue-router路由，因此，如果您已经熟悉Vue Router，则可以将您所了解的知识应用于Ionic Vue中的导航。

路由器配置在中router/index.ts，您应该看到类似于以下内容，这里是以启动项目模板blank为例：

import { createRouter, createWebHistory } from ‘@ionic/vue-router‘;
import { RouteRecordRaw } from ‘vue-router‘;
import Home from ‘@/views/Home.vue‘

const routes: Array<RouteRecordRaw> = [
  {
    path: ‘/‘,
    redirect: ‘/home‘
  },
  {
    path: ‘/home‘,
    name: ‘Home‘,
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

这里的设置与直接使用vue-router时相同，但是您需要从@ionic/vue-router导入依赖项，例如createRouter和createWebHistory 。routes就是定义的路由表，router = createRouter就是创建路由器实例，其实参数routes就是我们上面创建的路由表，history是路由方式。

Ionic Vue中路由懒加载是开箱及用的，将上面导入Home组件改为懒加载的方式：

const routes: Array<RouteRecordRaw> = [
  {
    path: ‘/‘,
    redirect: ‘/home‘
  },
  {
    path: ‘/home‘,
    name: ‘Home‘,
    component: () => import(‘@/views/Home.vue‘)
  }
]

 

 

@符号是我们可以用来描述相对于src目录的路径的快捷方式。如果要引用的组件路径层级很深，如：‘../../../views/Home.vue‘，就可以写为‘@/views/Home.vue‘。

Home组件看起来这样：

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Blank</ion-title>
        </ion-toolbar>
      </ion-header>

      <div id="container">
        <strong>Ready to create an app?</strong>
        <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
      </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from ‘@ionic/vue‘;
import { defineComponent } from ‘vue‘;

export default defineComponent({
  name: ‘Home‘,
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar
  }
});
</script>

<style scoped>
#container {
  text-align: center;

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;

  color: #8c8c8c;

  margin: 0;
}

#container a {
  text-decoration: none;
}
</style>

style标签上的scoped，表示当前的style标签内的样式只影响当前组件，这对于防止样式泄漏到组件之外并影响应用程序的其他部分很有用。我们强烈建议为Ionic Vue应用程序的样式使用scoped。

IonPage 是所有页面的基本组件（具有路由/ URL的组件），并且包括全屏组件的一些常见构造块，例如title，header和content组件。

创建自己的页面时，不要忘记IonPage做为页面的根组件。IonPage是根组件很重要，因为它有助于确保过滤(transition)正常工作，并提供ionic组件依赖的基础基础CSS。

IonHeader是旨在存在于页面顶部的组件。除了处理一些基于flexbox的布局外，它本身并没有做太多事情。它旨在容纳诸如IonToolbar或的组件IonSearchbar。

IonContent顾名思义，它是页面的主要内容区域。它负责提供用户将与之交互的可滚动内容，以及可在应用程序中使用的任何滚动事件。

进行一些修改：

<template>
  <ion-page>
    ...
    <ion-content>
      <ion-list>
        <ion-item>
          <ion-checkbox slot="start"></ion-checkbox>
          <ion-label>
            <h1>Create Idea</h1>
            <ion-note>Run Idea By Brandy</ion-note>
          </ion-label>
          <ion-badge color="success" slot="end">
            5 Days
          </ion-badge>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

这里的<ion-checkbox slot="start">中的slot在渲染ion-item时会将ion-checkbox渲染在ion-item的开始位置，这不是vue的API，这是WEB标准API，这与vue2的插槽API不同。

 让我们看看Ionic Framework的另一个组件FAB(浮动动作按钮 Float Action Button)。对于FAB，我们将需要三个组件：FAB，FAB Button和 Icon。

<template>
<ion-content>
  ...
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon :icon="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>
</template>

<script>
import { add } from ‘ionicons/icons‘;

...

export default defineComponent({
  name: ‘Home‘,
  ...,
  setup() {
    return {
      add
    }
  }
})
</script>

在ion-fab标签上，我们用vertical，horizontal分别设置水平和垂直位置，slot="fixed"是设置fab为固定定位，不随页面滚动，（这个slot是ion-content的插槽，见ion-content的文档说明），

现在，我们给FAB按钮添加点击处理程序。 单击FAB按钮时，我们要导航到一个新页面（稍后创建）。 为此，我们需要Vue Router的导航API。 这可以通过从vue-router包中导入useRouter来完成。 

<ion-fab-button @click="() => router.push(‘/new‘)">
  ...
</ion-fab-button>

import { useRouter } from ‘vue-router‘;

export default defineComponent({
  name: ‘Home‘,
  components: {
    ...
  },
  setup() {
    return {
      router: useRouter(),
      ...
    }
  }
});

我们引入了 useRouter 函数，当调用时，这个函数会注入路由依赖到当前组件。通过Vue Router我们能够访问历史API，从而我们可以将新路由压入导航堆栈。对于当前的Io??nFabButton，我们可以添加一个点击处理程序，只需调用router.push并传递新的路由即可。这里我们将导航到 /new。 

现在需要创建一个新组件并将新路由添加到路由器声明中。打开router / index.ts文件并添加新路由(规则)。

import { createRouter, createWebHistory } from ‘@ionic/vue-router‘;
import { RouteRecordRaw } from ‘vue-router‘;
import Home from ‘@/views/Home.vue‘
import NewItem from ‘@/views/NewItem.vue‘;

const routes: Array<RouteRecordRaw> = [
  {
    path: ‘/‘,
    redirect: ‘/home‘
  },
  {
    path: ‘/home‘,
    name: ‘Home‘,
    component: Home
  },
  {
    path: ‘/new‘,
    name: ‘NewItem‘,
    component: NewItem
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

现在我们的路由器具有/ new路由的条目， 我们将创建所需的组件NewItem。这将存在于views/NewItem.vue中。

现在让我们用一些占位符内容填充NewItem.vue文件。

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>New Item</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content></ion-content>
  </ion-page>
</template>

<script>
import {
  IonBackButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar
} from ‘@ionic/vue‘;
import { defineComponent } from ‘vue‘;

export default defineComponent({
  name: ‘NewItem‘,
  components: {
    IonBackButton,
    IonButtons,
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar
  }
});
</script>

这里的内容类似于Home组件。区别是IonBackButton组件。它用于导航回到上一页。但是如果我们重新加载页面怎么办？

在这种情况下，内存中的历史记录将丢失，因此后退按钮会消失。为了解决这个问题，我们可以将default-href属性值设置为没有历史记录时要导航到的URL。

<ion-back-button default-href="/home"></ion-back-button>

现在，应用程序如果没有历史记录，我们将导航回我们的Home页。

 

Ionic Vue预先安装了Ionicons。在应用程序中使用时有几个方式。

方式一“动态导入”来使用Ionicons。这涉及从ionicons包中导入您选择的图标，并将其传递给模板：

<template>
  <ion-page>
    <ion-content>
      <ion-icon :icon="heart"></ion-icon>
    </ion-content>
  </ion-page>
</template>

<script>
import { heart } from ‘ionicons/icons‘;
import {
  IonContent,
  IonPage,
} from ‘@ionic/vue‘;
import { defineComponent } from ‘vue‘;

export default defineComponent({
  name: ‘Icon‘,
  components: {
    IonContent,
    IonPage,
  },
  setup() {
    return { heart }
  }
});
</script>

首先，我们从ionicons/icons导入heart图标。这将为我们加载图标的SVG数据。接下来，我们在setup方法中将heart数据传递到模板。最后，我们通过icon属性将图标数据传递到ion-icon组件中。

开发人员还可以选择根据模式设置不同的图标：

<template>
  <ion-page>
    <ion-content>
      <ion-icon :ios="logoApple" :md="logoandroid"></ion-icon>
    </ion-content>
  </ion-page>
</template>

<script>
import { logoAndroid, logoApple } from ‘ionicons/icons‘;
import {
  IonContent,
  IonPage,
} from ‘@ionic/vue‘;
import { defineComponent } from ‘vue‘;

export default defineComponent({
  name: ‘Icon‘,
  components: {
    IonContent,
    IonPage,
  },
  setup() {
    return { logoAndroid, logoApple }
  }
});
</script>

请注意，在导入时，所有带连字符的图标名称都应以驼峰形式书写。如logo-apple要写logoApple。

 

方式二全局导入特定图标。通常不建议这样做，因为它将在每次启动应用程序时强制加载图标，并且会增加应用程序的初始块大小。但在某些情况下可能需要全局加载特定图标：

main.ts

import { addIcons } from ‘ionicons‘;
import { heart } from ‘ionicons/icons‘;

addIcons({
  ‘heart‘: heart 
});

Home.vue

<template>
  <ion-page>
    <ion-content>
      <ion-icon icon="heart"></ion-icon>
    </ion-content>
  </ion-page>
</template>

<script>
import {
  IonContent,
  IonPage,
} from ‘@ionic/vue‘;
import { defineComponent } from ‘vue‘;

export default defineComponent({
  name: ‘Home‘,
  components: {
    IonContent,
    IonPage,
  }
});
</script>

在main.ts中，addIcons函数使我们可以在全局范围内注册图标，并为它提供一个字符串作为键。然后，我们在Home组件中通过该键引用该图标。

 

构建原生App

现在，我们掌握了Ionic Vue应用程序的基础知识，包括一些UI组件和导航。 Ionic Framework组件的优点在于它们可以在任何地方使用，包括iOS，Android和PWA。 为了部署到移动设备，台式机以及其他设备，我们使用Ionic的跨平台应用程序运行时Capacitor。 它提供了一套以针对web的一致的API，使应用程序可以尽可能地以符合web标准的方式访问所有被支持的平台上的丰富的本地设备功能。

添加本机功能很容易。首先，将Capacitor添加到您的项目中：

ionic integrations enable capacitor

接下来，构建项目，然后添加您选择的平台：

ionic build
ionic cap add ios
ionic cap add android

我们使用标准的原生IDE（Xcode和Android Studio）来打开，构建和运行iOS和Android项目：

ionic cap open ios
ionic cap open android

可以在这里找到更多详细信息。

接下来，检查所有可用的API。有一些很棒的功能，包括Camera API。我们只需几行代码即可实现照片捕获功能：

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Ionic Blank</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <img :src="photo" />
      <ion-button @click="takePhoto()">Take Photo</ion-button>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonButton,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle
} from ‘@ionic/vue‘;
import { defineComponent, ref } from ‘vue‘;
import { Plugins, CameraResultType } from ‘@capacitor/core‘;
const { Camera } = Plugins;

export default defineComponent({
  name: ‘Home‘,
  components: {
    IonButton,
    IonContent,
    IonHeader,
    IonPage,
    IonTitle
  },
  setup() {
    const imageSrc = ref(‘‘);
    const takePhoto = async () => {
      const image = await Camera.getPhoto({
        quality: 90,
        allowEditing: true,
        resultType: CameraResultType.Uri
      });

      imageSrc.value = image.webPath;
    }

    return {
      photo: imageSrc,
      takePhoto
    }
  }
})
</script>

 

本指南介绍了创建Ionic Vue应用程序，添加一些基本导航以及介绍Capacitor作为构建原生应用程序的方法的基础知识。 要深入研究使用Vue和Capacitor构建完整的Ionic Framework应用程序，请遵循我们的“第一个应用程序”指南。要详细了解Ionic Framework的组件，请查看组件API。 有关Vue的更多详细信息，请查看Vue文档。 要继续构建原生功能，请参阅Capacitor文档。
祝构建应用程式愉快！ ??