Ionic+Capacitor中使用Ionic官方提供的插件 barcode-scanner Badge App Version

ionic5 Vue3实战教程： https://www.itying.com/goods-1150.html

一、Capacitor 中使用Ionic官方提供的插件

Capacitor中不仅可以使用系统内置插件，还可以使用Ionic官方以及Cordova给我们提供的插件，详情参考：https://capacitorjs.com/docs/cordova/using-cordova-plugins

Ionic中使用 Ionic Native Plugins：

npm install @ionic-native/javascript-package-name
npm install cordova-plugin-name
npx cap sync

如使用扫码插件barcode-scanner

https://ionicframework.com/docs/native/barcode-scanner

安装

npm install --save @ionic-native/core  //一个项目中只需要安装一次
npm install phonegap-plugin-barcodescanner
npm install @ionic-native/barcode-scanner
ionic cap sync

引入使用

import { BarcodeScanner } from "@ionic-native/barcode-scanner";
async scan() {
      const data = await BarcodeScanner.scan();
      console.log(`Barcode data: ${data.text}`);
}

二、call-number拨打电话

https://ionicframework.com/docs/native/call-number

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>CallNumber拨打电话</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-button @click="call">拨打电话 </ion-button>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonButton,
  IonButtons,
  IonBackButton,
} from "@ionic/vue";
import { CallNumber } from "@ionic-native/call-number";

import { defineComponent } from "vue";
export default defineComponent({
  name: "DevicePage",
  data() {
    return {
 
    };
  },
  methods: {
    async call() {
      // CallNumber.callNumber("10086", true)
      //   .then((res) => console.log("Launched dialer!", res))
      //   .catch((err) => console.log("Error launching dialer", err));
      
     await CallNumber.callNumber("10086", true);

    },
  },
  components: {
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonPage,
    IonButton,
    IonButtons,
    IonBackButton,
  },
});
</script>

三、获取应用版本

https://ionicframework.com/docs/native/app-version

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>AppVersion</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-button @click="getAppVersion">获取版本信息 </ion-button>
       {{ appName}}
       <br>
       {{ packageName}}
       <br>
       {{versionCode}}
       <br>
       {{versionNumber}}
       <br>
    </ion-content>
  </ion-page>
</template>

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

import { defineComponent } from "vue";
import { AppVersion } from "@ionic-native/app-version";
interface DeviceInfo {
  appName: string;
  packageName: string;
  versionCode: string | number;
  versionNumber: string;
}

export default defineComponent({
  name: "DevicePage",
  data() {
    return {
      appName: "",
      packageName: "",
      versionCode: "",
      versionNumber: "",
    } as DeviceInfo;
  },
  methods: {
    async getAppVersion() {
      const appName = await AppVersion.getAppName();
      const packageName = await AppVersion.getPackageName();
      const versionCode = await AppVersion.getVersionCode();
      const versionNumber = await AppVersion.getVersionNumber();
      this.appName = appName;
      this.packageName = packageName;
      this.versionCode = versionCode;
      this.versionNumber = versionNumber;
    },
  },
  components: {
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonPage,
    IonButton,
    IonButtons,
    IonBackButton,
  },
});
</script>

四、部分ionic cordova无法使用解决方法

https://capacitorjs.com/docs/android/troubleshooting#error-package-android-support-does-not-exist

npm install jetifier --save
npx jetify
npx cap sync android