ionic-vue 开发app移动端

安装nodejs
安装ionic

   npm install -g @ionic/cli

创建vue项目

  ionic start myApp blank --type vue

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

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

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-permissionandroid:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"tools:ignore="ProtectedPermissions" />

添加相机组件

 npm install -g @ionic/cli@latest native-run cordova-resnpm 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;}

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

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>

各种配置文件:

.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}]]
}

ionic-vue 开发app移动端相关推荐

vue开发app项目，涉及原生接口调用，用hbuilder打包
使用vue开发app项目,怎么使用手机的原生功能,以获取手机的相册,调用摄像头为例. 这里使用的是hbuilder打包. 第一步: 定义一个vue组件,代码如下: <template>&l ...
实践分享：开始用Cordova+Ionic+AngularJS开发App
http://www.cocoachina.com/webapp/20150707/12395.html 本文是一篇关于我本人在使用Cordova+Ionic以及AngularJS开发移动App的过程 ...
ionic混合开发APP基础知识点及生命周期使用一
导入storage app.module.ts文件 import { IonicStorageModule } from '@ionic/storage'; imports: [BrowserModu ...
vue开发app 手机物理返回键返回/退出
mui进行手机物理键的监听首先安装 vue-awesome-mui npm i vue-awesome-mui 在main.js注册 import Mui from 'vue-awesome-mui ...
基于vue开发的移动端（仿蘑菇街，淘宝）电商项目
基于vue.js的知识点(webpack,Vuex,Vue-router,axios)开发电商手机网站项目组件库:vantUI.ElementUI 码云地址:https://gitee.com/YG ...
android前端使用vue开发app，连接蓝牙打印机二维码
我使用的是vue配合Cordova混合开发,打包工具用的是cordova,首先需要先创建一个cordova项目,这里就不一一展示了,在网上可以搜到. 当项目创建成功之后,打开git Bash或者cmd ...
vue开发APP使用微信分享和QQ分享功能
条件微信开放平台申请微信开放平台appid 腾讯开放平台申请腾讯开放平台appid 打包环境Hbuilder manifest.json中plus下的plugins下添加如下代码,并填写你的appi ...
vue开发：移动端图片上传
因为最近遇到个移动端上传头像的需求,上传到后台的数据是base64位,其中为了提高用户体验,把比较大的图片用canvas进行压缩之后再进行上传.在移动端调用拍照功能时,会发生图片旋转,为了解决这个问题 ...
ionic capacitor 开发APP问题集合
1. 闪屏页,启动图标生成(利用 cordova-res 制作) cordova-res android 2. 闪屏页启动时 statusbar 为黑色配置 splashscren 参数 " ...
vue开发移动端，mui框架的各种使用方法
前面提到使用vue开发APP,自己不太熟悉,后来了解到有这个mui框架,然后改变状态栏颜色和监听返回键也是使用的这个框架,后来又遇到了一些问题,但是官网没有写操作方法(也许是没找到),后来在网上找到了 ...

ionic-vue 开发app移动端

ionic-vue 开发app移动端相关推荐

最新文章

热门文章