ionic-vue 开发app移动端

1. 安装nodejs
2. 安装ionic

   npm install -g @ionic/cli

4. 创建vue项目

  ionic start myApp blank --type vue

5. app组件库 插件库 Vant组件
6. ionic官网
7. 添加平台: (android studio建议最新版)

	ionic integrations enable capacitor
	//编译
	ionic build
	//添加平台
	ionic cap add android
	//同步到平台
	ionic cap sync android
	//打开android studio
	ionic cap open android

8. app权限

在AndroidManifest.xml 的application中添加 
        android:requestLegacyExternalStorage="true"
        android:usesCleartextTraffic="true"
权限:
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!--在sdcard中创建/删除文件的权限 -->
    <uses-permission
        android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"
        tools:ignore="ProtectedPermissions" />

9. 添加相机组件

	npm install -g @ionic/cli@latest native-run cordova-res
	npm install @capacitor/camera @capacitor/storage @capacitor/filesystem
	
	//定义
	import {Camera, CameraResultType, CameraSource} from '@capacitor/camera';
	export function usePhotoGallery() {
	    /**
	     * 返回:{webPath,path,xxx}
	     */
	    const takeCamera = async () => {
	        const image = await Camera.getPhoto({
	            resultType: CameraResultType.Uri,
	            source: CameraSource.Camera,
	            quality: 100,
	            saveToGallery: true
	        });
	        return image;
	    };
	    return {
	        takeCamera
	    };
	}
	//调用
	const {takeCamera} = usePhotoGallery();
	  openCamera = async () => {
	    const image = await takeCamera();
	    alert(image.webPath);
	    this.imageSrc = image.webPath;
	  }

10. 二维码扫描: 需在android中添加 libs 下的android-support-v4.jar 并修改插件源码
11. 签名组件:

npm i signature_pad
//文件处理
npm install @capacitor/filesystem
npx cap sync
//组件代码
<template>
  <div style="width:calc(100% - 20px);height:calc(100% - 20px)">
    <canvas style="width:100%;height:100%;" id="canvas"></canvas>
  </div>
</template>

<script>
import SignaturePad from 'signature_pad';
import {Filesystem, Directory, Encoding} from '@capacitor/filesystem';
import {GetUriResult} from "@capacitor/filesystem/dist/esm/definitions";

export default {
  name: "SignModel",
  mounted() {
    const canvas = document.querySelector("canvas");
    this.signaturePad = new SignaturePad(canvas);
  },
  methods: {
    async saveSign() {
      if (!this.signaturePad.isEmpty()) {
        this.signaturePad.off();
        const a = await Filesystem.writeFile({
          path: 'sign.png',
          data: this.signaturePad.toDataURL().split("base64,")[1],
          directory: Directory.External,
        });
        return await this.copyPhoto();
      }
    },
    async copyPhoto() {
      let filePath = "DCIM/Camera/" + new Date().getTime() + ".png";
      await Filesystem.copy({
        from: "sign.png",
        to: filePath,
        directory: Directory.External,
        toDirectory: Directory.ExternalStorage
      });
      let GetUriResult = await Filesystem.getUri({
        path: filePath,
        directory: Directory.ExternalStorage
      })
      return GetUriResult.uri;
    },
    clearCanvas() {
      this.signaturePad.clear();
      this.signaturePad.off();
    }
  }
}
</script>

<style scoped>

</style>

10. 各种配置文件:

.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/no-deprecated-slot-attribute': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    "@typescript-eslint/ban-ts-comment": "off",
    'prefer-const': 'off',
    "@typescript-eslint/no-inferrable-types": "off",
    "@typescript-eslint/no-this-alias": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/member-delimiter-style": "off",
    "@typescript-eslint/ban-ts-ignore":"off",
    "@typescript-eslint/no-unused-vars":"off",
    "@typescript-eslint/camelcase":"off",
    "no-console":"off"
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

tsconfig文件
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

tslint.json文件
{
  "defaultSeverity": "warning",
  "extends": [
    "tslint:recommended"
  ],
  "linterOptions": {
    "exclude": [
      "node_modules/**"
    ]
  },
  "rules": {
    "prefer-const": false,
    "indent": [
      true,
      "spaces",
      2
    ],
    "interface-name": false,
    "no-consecutive-blank-lines": false,
    "object-literal-sort-keys": false,
    "ordered-imports": false,
    "prefer-const": false,
    "quotemark": [
      true,
      "single"
    ]
  }
}

babel.config.js
module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
        [
            "import",
            {
                "libraryName": "vant",
                "libraryDirectory": "es",
                "style": true
            }
        ]
    ]
}