ionic配合capacitor使用

由 行走之间 发布

ionic配合capacitor使用

  • capacitorcordova有所区别,但是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"
    }

仅有一条评论

  1. zii
    zii · 2020-12-06 17:34

    一起学习啊

发表评论