ionic4 的简单总结

试用了一下ionic4，简单总结一下和ionic3的不同之处

页面跳转机制

之前是是用navctr，现在改成router了。貌似ionic一直都是跟着angular走的。

• 优点：

  • 所有 页面在路由文件中一目了然在 app-routing.module.ts页面，而且可以随意配置页面的路径。想跳转到哪里，只要记住路径，随时都可以跳转。
  • 模块与模块之间 结构层次清晰。主模块（这个是我自己定义的）在 app-routing.module.ts里配置，每一个在里面的Module 又可以单独成为一个主模块。

• 缺点

  • 页面跳转之间无法直接传递对象了，这导致ionic3 升级成ionic4 的时候变的比较麻烦了。（因为我之前很多页面都是直接传递的）。解决方法是可以传递一个简单的id值。通过id值去service（原来的provider），或者storage在新页面获取。（这其实不算缺点，算是限制了coder 的写码风格，对coder的要求更高了。这要求coder能够有基本的程序设计思维。

html页面一些写法的变化

• 响应式网格布局。这个变化不大，精髓还是根据网页的大小自动分配12格的布局。主要是写法上变化了之前的col=“12” 变成了 size=“12”
• no-lines = true 变成了 lines=“none”
• <button ion-button full></button>变成了 <ion-button expand="full"></ion-button>
• 等等.... 还有一些变化，大家遇到了直接去官网查看就好了

主题的变化

这个主题变化有些大，Ionic CSS Variables 不再是简单的用primary 等名字命名颜色了。用的是sass的变量值。这里简单说一些

• 定义一个变量：

 //--名称：值
 --ion-color-primary: #3880ff;

在css类里使用这个变量

// 通过 var(--名称） 的方式可以获取到变量的值
.primary_color{
color:var(--ion-color-primary)
}

todo 只是简单的试用，有些表达可能不够准确，有谁知道还有哪些比较重要的变化，欢迎留言。