ionic配合capacitor使用
capacitor
和cordova
有所区别,但是capacitor
是ionic官方团队自己开发的,性能和适配性更好创建
capacitor
应用ionic start photo-gallery tabs --type =(vue or angular or react) --capacitor ionic start photo-gallery tabs --type=angular --capacitor
安装可以在web端访问一些原生插件,如摄像头
npm install @ionic/pwa-elements // main.ts import { defineCustomElements } from '@ionic/pwa-elements/loader'; // Call the element loader after the platform has been bootstrapped defineCustomElements(window);
启动项目
cd photo-gallery ionic serve
打包
ionic build
创建Android和iOS应用
ionic cap add ios ionic cap add android
将应用拷贝到Android和iOS中,代码改变则需要进行这步骤
ionic cap copy
将插件同步,添加了插件需要该步骤
ionic cap sync
打开Xcode 或者 Android studio
ionic cap open (ios or android )
使用权限,在Cordova中会有
config.xml
目录进行权限的声明,在capacitor
需要在各自项目中配置// Android权限配置目录 android/app/src/main/AndroidManifest.xml // ios权限配置目录 ios/app/app/info.plist
代码真机热更新,写完代码在真机上实时可见
ionic cap run ios -l --external ionic cap run android -l --external
添加插件后需要执行的命令,否则可能会出现插件无法找到的报错
ionic build npx cap copy ios npx cap sync // 卸载之前的软件 ionic cap run ios -l --external
简洁的方法,在package.json文件加入以下命令,ios同理
"scripts": { "android": "npm run build && npx cap sync && npx cap open android" }
zii · 2020-12-06 17:34
一起学习啊