Ionic4 Is Coming

image

想标题真是一件很麻烦的事，所以就借用<权利的游戏>的经典台词:Winter Is Coming。最近看了看ionic4的相关文档，初步总结一下。

Ionic Components

Ionic4 使用stencil来构建webComponet，对于webComponet而言，是没有双向绑定这些的，所以为了适配Angular，在这些webComponet上面做了一层封装。Angular用户而言只用使用@ionic/angular就可以了。

组件的API层面变化挺大，具体可看BREAKING。有大量的属性重命名，感觉以后项目升级改动不小，至少的去除，就要修改很多页面。

路由

ionic4中推荐使用Angular Router，并且实现了自己的`。

对于lazylaod而言,@IonicPage的方式将会废弃。

不过这种方式固有的缺陷就是状态保存，对于移动App而言，返回上一页除了需要保存数据之外，页面的滚动状态也是需要保存的。

ionic3中基于stack的方式，本质上是z-index的增加。页面的dom结构并不会删除，所以返回上一页时和之前完全一样。
Angular的路由是会删除dom的，最多也只是数据的保存。不知道官方说推荐使用Angular Router是处于什么原因，看来一下ionic4的源码，也没有发现什么特别的处理。

不过，ionic4还是支持stack的方式的。

Ionic Native cordova capacitor

Ionic Native 会支持cordova capacitor。

Ionic Native 与 cordova plugin 版本之间对应的管理。比如Ionic Native的keyboard的哪些版本对于cordva plugin的哪些版本，个人感觉其实挺混乱的，需要自己去辨别吧。

capacitor虽说可以使用cordova，但是不支持参数，需要自己在代码中去写。关注点就不仅仅是web端了，需要hook去修改生成的原生项目，或者原生源码加入版本管理。

还是很希望capacitor能解决一些原生的问题的，比如keyboard的一些问题。

Ionic Cli VS Angular Cli

个人推荐使用 Angular cli。目前做的项目大概有300个 component。之前--prod打包经常内存溢出。后来换了一台16G内存的电脑，打包时间大概有40分钟，主要是webpack编译阶段很慢。

ionic cli的功能基本等于 angular cli + cordova cli + ionic pro(收费) 的封装，对于我们而言，完全没有必要使用ionic cli。直接使用 angular cli + cordova cli，在Angular cli生成的项目中新建cordova文件夹，里面初始化一个cordova项目，只需要把Angular生成的项目Copy进去，写一些脚本自动化就可以了。

默认ionic cli 生成的项目，css处理，使用selector来隔离样式的，并且是单独打包的。既然使用了angular，我们完全可以使用angular的style encapsulation。

使用Angular cli的一个好处就是可以直接使用environments。而Ionic CLI 则要做很多，具体可看ionic3 中使用 environments。

之前测试打包问题。发现在ionic cli上--prod能通过的，在Angular Cli上却不能，个人还是相信Angular官方推荐的工具吧

总之web的东西就交给Angular，我们只是使用ionic提供的组件库。

运行官方源码的Angular Demo

git clone https://github.com/ionic-team/ionic.git

// 生成 @ionic/angular
cd angular
npm install
npm run build

// 运行demo
cd test/nav
npm install
npm run copy-ionic-angular
npm run serve

资源链接

Ionic4
capacitor
stencil