ionic+vue+capacitor系列笔记--03项目使用Native插件

1.

下载依赖

npm install @capacitor/camera

添加权限配置代码到安卓文件夹里的 AndroidManifest.xml

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

使用代码

import { Camera, CameraResultType } from '@capacitor/camera';const takePicture = async () => {const image = await Camera.getPhoto({quality: 90,allowEditing: true,resultType: CameraResultType.Uri});// image.webPath will contain a path that can be set as an image src.// You can access the original file using image.path, which can be// passed to the Filesystem API to read the raw data of the image,// if desired (or pass resultType: CameraResultType.Base64 to getPhoto)var imageUrl = image.webPath;// Can be set to the src of an image nowimageElement.src = imageUrl;};

2.app-launcher插件–跳转其他应用程序

npm install @capacitor/app-launcher

代码com.getcapacitor.myapp 要改为我们需要跳转的APP package name

import { AppLauncher } from "@capacitor/app-launcher/dist/esm/index"; // 这个和官方文档的不一样，文档里写的是不用async function openvOtherApp() {const { value } = await AppLauncher.canOpenUrl({url: "com.getcapacitor.myapp",});console.log("test: Can open url: ", value);if (value) {await AppLauncher.openUrl({url: "com.getcapacitor.myapp://page?id=portfolio",});}}openvOtherApp();

同步插件和代码

ionic cap sync### 功能测试会弹出一个申请权限的弹框，然后允许以后就会跳转到相应的应用程序里## 3.Device 获取设备信息

npx cap sync

### 代码

import { Device } from “@capacitor/device/dist/esm/index”;

async function getDeviceInfo() {

const info = await Device.getInfo();

console.log(info);

}

async function getBatteryInfo() {

const info = await Device.getBatteryInfo();

console.log(info);

}

![](/blog/1675284/04/1675284-040008375-2068149995.png)## 4.Toast 展示Message

npm install @capacitor/toast

npx cap sync

### 代码

import { Toast } from ‘@capacitor/toast/dist/esm/index’;

async function showToast() {

await Toast.show({

text: ‘Hello!’,

});

}

## 5.使用 keychin插件(此步骤待继续补充)/docs/native/keychain### 下载依赖

$ npm install cordova-plugin-ios-keychain

$ npm install @awesome-cordova-plugins/keychain

### 在代码中使用插件

import { Keychain } from ‘@awesome-cordova-plugins/keychain/ngx’;

let keychain : Keychain = new Keychain();

keychain.set(‘myKeychin’, ‘value’).then(() => {

keychain.get(‘myKeychin’)

.then(value => console.log(‘myKeychin Got value’, value))

.catch(err => console.log(‘myKeychin Error getting’, err));

})

.catch(err => console.error(‘Error setting’, err));

### 发现这个东西居然依赖angular/core

npm install @angular/core

### 打包同步代码

$ ionic cap sync

### 遇到报错

-04-20 10:38:06.842 11081-11081/io.ionic.starter W/Capacitor/Console: File: http://localhost/js/788.1de990ee.js - Line 1401 - Msg: Native: tried calling Keychain.set, but the Keychain plugin is not installed.

-04-20 10:38:06.843 11081-11081/io.ionic.starter W/Capacitor/Console: File: http://localhost/js/788.1de990ee.js - Line 1401 - Msg: Install the Keychain plugin: ‘ionic cordova plugin add cordova-plugin-ios-keychain’

-04-20 10:38:06.844 11081-11081/io.ionic.starter I/Capacitor/Console: File: http://localhost/js/788.1de990ee.js - Line 1372 - Msg: Ionic Native: deviceready event fired after 2 ms

-04-20 10:38:06.844 11081-11081/io.ionic.starter E/Capacitor/Console: File: http://localhost/js/788.1de990ee.js - Line 1401 - Msg: Error setting plugin_not_installed

### 解决报错

ionic cap update

ionic cap sync

## 遇到不兼容报错 Found 1 incompatible Cordova plugin for android, skipped install看了文档：/blog/thanks-to-capacitor-ive-fallen-in-love-with-mobile-development-again/

[capacitor] [info] Found 1 incompatible Cordova plugin for android, skipped install:

[capacitor] cordova-plugin-ios-keychain@3.0.1

![](https://img-/img_convert/4d349814933c8390912954cd3b02eb90.png)## 6.待继续添加![在这里插入图片描述](https://img-/62617433e0fb485c9ce5546b59341864.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAdGFuZ2RvdTM2OTA5ODY1NQ==,size_20,color_FFFFFF,t_70,g_se,x_16)### 欢迎路过的小哥哥小姐姐们提出更好的意见哇~~