Ionic 및 Vue로 모바일 개발 시작하기

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Vue 웹 앱을 만드는 방법을 알고 있지만 모바일 앱을 개발하려는 경우 Ionic 프레임워크를 사용할 수 있습니다.

이 기사에서는 Vue를 사용하여 Ionic 프레임워크로 모바일 개발을 시작하는 방법을 살펴보겠습니다.

시작하기

몇 가지를 설치하여 시작할 수 있습니다.

먼저 다음을 실행하여 Ionic CLI를 전역적으로 설치합니다.

npm install -g @ionic/cli@testing

다음으로 다음을 실행하여 Ionic 앱 프로젝트를 만들 수 있습니다.

ionic start ionic-vue-app blank --type vue --tag vue-beta

tabs 앱에 탭을 추가합니다.
type를 react로 설정하면 React 프로젝트를 생성한다는 의미입니다.
--capacitor는 Capacitor를 추가하여 프로젝트 파일에서 기본 앱을 실행하고 빌드할 수 있음을 의미합니다.

Genymotion으로 앱을 실행하고 기본 앱을 빌드하려면 더 많은 작업을 수행해야 합니다.

다음으로 package.json 파일에 일부 스크립트를 추가합니다.

우리는 쓴다:

"ionic:serve": "vue-cli-service serve",
"ionic:build": "vue-cli-service build"

scripts 섹션으로 이동합니다.

그런 다음 다음을 실행합니다.

ionic build

자산 폴더를 생성합니다.

그런 다음 다음을 실행합니다.

npx cap add android
npx cap sync

Android 종속성을 추가합니다.

그런 다음 Android Studio와 Genymotion을 설치해야 합니다.

Android Studio를 설치한 후 Android Studio용 Genymotion 플러그인을 설치합니다.

그렇게 하면 다음을 실행합니다.

ionic capacitor run android --livereload --external --address=0.0.0.0

Genymotion으로 ionic:serve 스크립트를 실행합니다.

Genymotion에서 앱을 볼 수 있고 모든 변경 사항이 자동으로 로드됩니다.

카메라 앱 만들기

몇 가지 간단한 단계를 수행하여 Ionic Vue로 카메라를 만들 수 있습니다.

작성하기 위해 views/Home.vue  에 다음을 추가합니다.

<template>
  <ion-page>
    <ion-content>
      <ion-grid>
        <ion-row>
          <ion-col>
            <ion-button @click='takePhoto'>take photo</ion-button>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="6" :key="photo" v-for="photo in photos">
            <ion-img :src="photo.webviewPath"></ion-img>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonContent,
  IonHeader,
  IonPage,
  IonGrid,
  IonRow,
  IonCol,
  IonImg,
  IonButton
} from "@ionic/vue";
import { defineComponent } from "vue";
import { ref, onMounted, watch } from "vue";
import {
  Plugins,
  CameraResultType,
  CameraSource,
  CameraPhoto,
  Capacitor,
  FilesystemDirectory,
} from "@capacitor/core";

interface Photo {
  filepath: string;
  webviewPath?: string;
}

function usePhotoGallery() {
  const { Camera } = Plugins;
  const photos = ref<Photo[]>([]);
  const takePhoto = async () => {
    const cameraPhoto = await Camera.getPhoto({
      resultType: CameraResultType.Uri,
      source: CameraSource.Camera,
      quality: 100,
    });
    const fileName = new Date().getTime() + ".jpeg";
    const savedFileImage = {
      filepath: fileName,
      webviewPath: cameraPhoto.webPath,
    };
    photos.value = [savedFileImage, ...photos.value];
  };

  return {
    photos,
    takePhoto,
  };
}

export default defineComponent({
  name: "Home",
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonGrid,
    IonRow,
    IonCol,
    IonImg,
    IonButton
  },
  setup() {
    const { photos, takePhoto } = usePhotoGallery();
    return {
      takePhoto,
      photos,
      close,
    };
  },
});
</script>

카메라를 가져오는 usePhotoGallery 함수를 추가합니다.

그런 다음 Camera.getPhoto 메서드를 호출하여 카메라를 가져옵니다.

카메라의 resule 유형을 얻기 위해 CameraResuultType.Uri 속성을 얻습니다.
quality 사진에 대한 품질이 있습니다.

그런 다음 photos.value 속성에 저장된 카메라로 이미지를 촬영하는 새 이미지 조정기로 photo.value 속성을 설정합니다.

그런 다음 photos 개체를 반복하여 찍은 사진을 반복합니다.

결론

Ionic과 Vue로 모바일 앱을 쉽게 만들 수 있습니다.