ionic配合capacitor使用

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"
  }

---

• 分类： WEB 前端 ionic
• 标签： 无标签