Ionic+Capacitor中使用Capacitor官方提供插件

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

一、Capacitor Api介绍

Capacitor包含许多可用于所有Capacitor应用程序的本机插件API。这些可以被认为是电容器的“核心插件”。对于来自Cordova的用户，核心的Capacitor插件涵盖了Cordova的大部分核心插件，并且还包含一些新插件。

https://capacitorjs.com/docs/apis

二、Ionic+Capacitor获取手机设备信息

https://capacitorjs.com/docs/apis/device

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>capacito设备插件</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-button @click="getDevice"> 获取设备信息 </ion-button>    
      {{device}} 
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonButton,
  IonButtons,
  IonBackButton    
} from "@ionic/vue";
import { Plugins } from '@capacitor/core';
const { Device } = Plugins;
import { defineComponent} from 'vue';
export default defineComponent({
  name: "DevicePage", 
  data(){
    return{
      device:""
    }
  },
  methods:{
    async getDevice(){
      const info = await Device.getInfo();
      console.log("Device Info")
      console.log(JSON.stringify(info))
      this.device=JSON.stringify(info)
    }
  },
  components: {
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonPage,
    IonButton,
    IonButtons,
    IonBackButton,   
  }
});
</script>

三、Ionic+Capacitor 获取网络状态

https://capacitorjs.com/docs/apis/network

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>Network</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-button @click="getStatus"> 获取网络状态 </ion-button>

      {{network}}
    </ion-content>
  </ion-page>
</template>

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

import { defineComponent } from "vue";
export default defineComponent({
  name: "NetworkPage",
  data() {
    return {
      network: "",
    };
  },
  methods: {
    async getStatus() {
      const status = await Network.getStatus();
      alert(JSON.stringify(status));
      this.network = JSON.stringify(status);
    },
  },
  mounted() {
     Network.addListener("networkStatusChange", (status) => {
      this.network = JSON.stringify(status);
      console.log("111", JSON.stringify(status));     
    });
  },
  components: {
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonPage,
    IonButton,
    IonButtons,
    IonBackButton,
  },
});
</script>