vue3+quasar+capacitor开发多平台项目,使用cordova和capacitor插件(支持所有前端框架）

阅读原文时间：2023年07月09日阅读：2

框架文档地址：https://quasar.dev/start/quasar-cli

npm init quasar

 npx quasar dev
 npx quasar build

接入capacitor的两种方式

文档地址：https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/preparation

quasar mode add capacitor

这个命令会生成一个文件夹src-capacitor

文档是这么解释的：In order to develop/build a Mobile app, we need to add the Capacitor mode to our Quasar project. This will use the Capacitor CLI to generate a Capacitor project in /src-capacitor folder.

quasar dev -m capacitor -T [android|ios]

这个命令会打开安卓软件，android studio

npm install --save @capacitor/core @capacitor/cli --save

npx cap init
npm install @capacitor/android --save
npx cap add android
npx cap copy android
npx cap sync // 必不可少，如果不执行这个，安卓那边会报错哦
npx cap open android

--------------× copy android - failed!

[error] The web assets directory (.\dist) must contain an index.html file.

It will be the entry point for the web portion of the Capacitor app.

下载依赖

npm install @capacitor/app-launcher --save
npm install @capacitor/device --save
npm install @capacitor/camera --save
npm install @capacitor/network --save
npm install @capacitor/app --save
npm install cordova-res --save
使用方式

import { Camera, CameraResultType } from "@capacitor/camera/dist/esm/index";
async function openCamera() {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: true,
resultType: CameraResultType.Uri,
});
var imageUrl = image.webPath;
alertMessage("imgSrc:" + imageUrl);
// imageElement.src = imageUrl;
}
// 断网检测
import { Network } from "@capacitor/network/dist/esm/index";
const offlineHandler = async (status: any) => {
if (!status.connected) {
alertMessage("Please check your network connection.");
}
};

Network.addListener("networkStatusChange", offlineHandler);

1.建文件夹，放资源

2.图片大小

3.执行命令

npx cordova-res android --skip-config --copy
cordova-res ios --skip-config --copy

以发送请求插件为例

npm install cordova-plugin-advanced-http@3.3.1 --save
npm install cordova-plugin-file@3.0 --save
npx quasar build
npx cap sync

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.aad.capa',
  appName: 'app0522',
  webDir: 'dist/spa',
  bundledWebRuntime: false,
  android: {
    hideLogs: false,
    allowMixedContent: true,
    webContentsDebuggingEnabled: true
  },
};

export default config;

Failed to load plugin 'import' declared in '..\cap-plugin-AA\package.json » @ionic/eslint-config/recommended': Cannot find module 'eslint-plugin-import'