ionic vue

原文 

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导入依赖项,例如createRoutercreateWebHistory 。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文档
祝构建应用程式愉快! 🎉

 

posted @ 2020-10-23 16:08  johnjackson  阅读(2397)  评论(0编辑  收藏  举报