ionic5+capacitor+angular

比眉伴天荒 2023-07-18 06:58 106阅读 0赞

ionic 更新到5之后。创建项目会默认使用capacitor 容器。是ionic自己开发的一套类似cordova的东西。使用起来也比较简单。慢慢的会替代cordova，变成自己的东西吧。

官方地址[https://capacitor.ionicframework.com/docs/basics/running-your-app][https_capacitor.ionicframework.com_docs_basics_running-your-app]

之前使用的是ionic cordova 来操作   现在使用npx cap 来操作

## 安装ionic ##

npm install -g ionic

## 创建项目 ##

ionic start capApp tabs --capacitor

## 进入项目目录安装 ##

npm install --save @capacitor/core @capacitor/cli

## **初始化项目** ##

npx cap init

## 构建项目和添加平台 ##

npm run build
    
    npx cap add android
    npx cap add ios
    
    npx cap copy

## **[安装插件][Link 1]** ##

npm install cordova-plugin-name
    npx cap sync

## 删除插件 ##

npm uninstall --save cordova-plugin-splashscreen

## **更新[插件][Link 1]** ##

npm install cordova-plugin-name@latest
    npx cap update

## [安装离子本地插件][Link 2] ##

[离子原生][Link 3]提供了打字稿包装和一致的API并与科尔多瓦插件更容易开发的命名约定。它支持电容器，所以每当你找到一个离子本地包装你想使用，安装JavaScript代码，请安装相应的插件科尔多瓦，然后同步您的项目：

npm install @ionic-native/javascript-package-name
    npm install cordova-plugin-name
    npx cap sync

## [更新离子本地插件][Link 4] ##

类同的安装步骤。更新离子本地JavaScript库，删除然后重新添加科尔多瓦插件，然后更新您的项目：

npm install @ionic-native/javascript-package-name@latest
    npm install cordova-plugin-name@latest
    npx cap update

如果你不想冒险引进重大更改，使用`npm update cordova-plugin-name`代替`@latest`。

## **添加平台** ##

npx cap add ios
    npx cap add android

## 打开平台 ##

npx cap open ios

## **运行** ##

npx cap serve

## **构建发布新版本** ##

//如果在ionic 则 ionic build
    npm run build

## **构建完后配置到项目里** ##

npx cap copy

## **定期更新依赖** ##

npx cap update

service worker是一个可以拦截请求，并且创建缓存空间来缓存请求数据的一个工具，当然他还有其他的功能，如消息推送之类的，功能十分强大，具体使用方法可以看 [https://developer.mozilla.org/en-US/docs/Web/API/Service\_Worker\_API][https_developer.mozilla.org_en-US_docs_Web_API_Service_Worker_API]

Capacitor建议我们使用[Workbox][]工具来配置service worker，注册service worker的代码很简单。看这里[https://www.jianshu.com/p/5f3e69e41253?tdsourcetag=s\_pctim\_aiomsg][https_www.jianshu.com_p_5f3e69e41253_tdsourcetag_s_pctim_aiomsg]

[https_capacitor.ionicframework.com_docs_basics_running-your-app]: https://capacitor.ionicframework.com/docs/basics/running-your-app
[Link 1]: https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins/#installing-cordova-plugins
[Link 2]: https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins/#installing-ionic-native-plugins
[Link 3]: https://ionicframework.com/docs/native
[Link 4]: https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins/#updating-ionic-native-plugins
[https_developer.mozilla.org_en-US_docs_Web_API_Service_Worker_API]: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
[Workbox]: https://developers.google.com/web/tools/workbox/guides/get-started
[https_www.jianshu.com_p_5f3e69e41253_tdsourcetag_s_pctim_aiomsg]: https://www.jianshu.com/p/5f3e69e41253?tdsourcetag=s_pctim_aiomsg