在VUEJS VITE移动应用程序中使用离子电容器插件-DEV365 开发者社区

请参阅相关视频

https://dev.to/aaronksaunders/how-to-create-a-mobile-app-using-vite-vue-and-ionic-capacitor-in-8-minutes-including-explanation-1c4g

在上面链接的博客文章中，我们讨论了使用Vue，Vite和Ionic Capacitor创建移动应用程序。

在此视频中，我们将使用Capacitor Camera和Capacitor Action Sheet插件来改善用户体验，而无需依靠离子框架。通过使用这些插件的PWA元素版本，它们可用于在浏览器或设备上运行的PWA。

设置所需库

首先安装插件

npm install @capacitor/camera
npm install @capacitor/action-sheet

然后将更改与电容器同步

npx cap sync

接下来，我们需要安装PWA元素，该元素在应用程序不在移动设备上运行时提供基于Web的用户体验，PWA元素中的更多信息可以在capacitor documentation
中找到。

npm install @ionic/pwa-elements

修改项目代码

在安装了主应用程序组件后，我需要加载元素加载程序。

将以下代码添加到main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import { defineCustomElements } from '@ionic/pwa-elements/loader';

createApp(App).mount('#app')

// Call the element loader after the app has been rendered the first time
defineCustomElements(window);

动作表

让我们从操作表开始，在App.vue的script setup部分中修改代码。该代码直接从上面引用的电容器文档中复制

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";

// New Import for ActionSheet Plugin
import { ActionSheet, ActionSheetButtonStyle } from "@capacitor/action-sheet";

// New function to render the ActionSheet
const showActionSheet = async () => {
  const result = await ActionSheet.showActions({
    title: "Photo Options",
    message: "Select an option to perform",
    options: [
      {
        title: "Upload",
      },
      {
        title: "Share",
      },
      {
        title: "Remove",
        style: ActionSheetButtonStyle.Destructive,
      },
    ],
  });

  console.log("Action Sheet result:", result);
};
</script>

最后，我们有一个模板，该模板需要一个按钮来触发事件以调用函数showActionSheet。

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue + Ionic Capacitor" />
  <button @click="showActionSheet">SHOW ACTION SHEET</button>
</template>

相机

由于我们已经安装了插件，请直接跳入代码。

在App.vue脚本部分的内部，我们将添加所需的导入

import { Camera, CameraResultType } from '@capacitor/camera';
import { ref } from "vue";

和一个新功能可以拍照。

// ref for image from camera
const imageUrl = ref<string|undefined>()

// camera
const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });

  imageUrl.value = image.webPath;
};

在模板中，让我们添加按钮以触发事件以调用新功能以创建照片，以及一个HTML图像元素以从相机中保存图像

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue + Ionic Capacitor" />
  <button @click="showActionSheet" class="action-button">SHOW ACTION SHEET</button>
  <button @click="takePicture"  class="action-button">TAKE PICTURE</button>
  <img :src="imageUrl" style="width: 100%"/>
</template>

设置所需库

修改项目代码

动作表

相机

更多的...