如题，将记录ionic3升级到ionic4写法上的所有变化
持续更新，欢迎大家补充
无分类，发现一个就写一个
迁移时千万不要把所有代码都复制过来再修改错误，那会让你怀疑人生。正确的顺序是，新建空ionic4工程，然后用指令一个个创建页面，先把页面样式调好，最后再写ts代码逻辑。
qq群320021484，一起讨论学习
1.自定义color颜色
 
<ion-icon color="gray_text"></ion-icon>
 
ionic3写法：忘了
 
ionic4写法：在scss下定义
 
.ion-color-gray_text {

    --ion-color-base: #BBBBBB;

    --ion-color-base-rgb: 187,187,187;

    --ion-color-contrast: #000000;

    --ion-color-contrast-rgb: 0,0,0;

    --ion-color-shade: #a5a5a5;

    --ion-color-tint: #c2c2c2;

}
 
这里有6个属性，只需定义第一个base颜色，其他的可以在ionic网站上自动生成https://ionicframework.com/docs/theming/color-generator
 
2.自定义小图标
 
<ion-icon ios="ios-backwhite"></ion-icon>
 
ionic3写法：.ion-ios-backwhite { content: url("../assets/imgs/back_white.svg");}
 
ionic4写法：1.新建svg目录，与app目录平级
 
                     2.将ios-backwhite.svg放入svg目录下
 
                     3.修改angular.json文件
 
"assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              },
              {
                "glob": "**/*.svg",
                "input": "src/svg",
                "output": "./svg"
              }
            ]
 
3.button控件
 
ionic3写法：
 
<button ion-button clear small round block>
</button>
 
ionic4写法：
 
<ion-button fill="clear" size="small" shape="round" expand="block"></ion-button>
 
button以前的写法都失效了，变化大。
 
4.no-lines
 
ionic3写法：<ion-list no-lines>
 
ionic4写法：<ion-list lines="none">
 
5.item-left、item-end
 
ionic3写法：<ion-item item-left> <ion-item item-end>
 
ionic4写法：<ion-item slot="start"> <ion-tem slot="end">
 
其他类似属性请看官网
 
6.css引用自定义颜色
 
ionic3写法：
 
 ion-content{
        background: color($colors,partingline);
    }
 
其中partingline是在variables.scss里的$colors里定义的，相信大家都自定义过
 
ionic4写法：
 
 ion-content{
    --background: var(--ion-color-partingline);
}
 
--ion-color-partingline: #f6f6f6;
 
background前加了--，不加无法生效。具体哪些属性需要加--，哪些不需要，在浏览器里看源码，时间长就记住了。
 
7.ionic-angular包名变更
 
ionic4写法：@ionic/angular

快过年罗，期待与家人的团聚，想想有点小激动，嘿嘿~~只是手头还有个项目难度比较大，希望早点搞定......感觉每天都有太多的事情，学习的时间越来越少，难道是年龄越大时间越不够用吗？？接近三个月都在加班加点的忙项目，没有像以前那样不断学习总结了，只是每周会关注学习Ionic3仿京东项目的后续更新视频教程，给自己找一点满足感，听说Ionic4.x也快出来了，不过正常Ionic4.x与Ionic3.x不会有太大差距，我想掌握了Ionic3.x一样能玩转Ionic4.x吧，今天将更多的知识点分享下，Ionic4.x/Ionic5.x从基础入门到项目实战视频教程希望大家可以共同探讨。（注：Ionic4和Ionic5的用法是一样的）
 
 
 
Ionic4/Ionic5入门实战视频教程网盘下载地址：https://pan.baidu.com/s/1_cQXxV98qWXuGR9fq0nlSw 提取码：ib4a
 
 
 
Ionic4.x/Ionic5.x从基础入门到项目实战视频教程目录介绍:
 
 
 
第一讲  Ionic+  Angular+  Cordova介绍以及Ionic3.x+环境搭建、Ionic的安装运行、Ionic有时候安装失败怎么办？
 
第二讲  Ionic+ 目录结构分析、app.module.ts分析、创建组件、创建页面、ionic3.x页面跳转(上）
 
第三讲 Ionic+ 目录结构分析、app.module.ts分析、Ionic创建组件、Ionic创建页面、ionic3.x页面跳转（下）
 
第四讲  Ionic+ 新增tabs页面 去掉二级页面tabs菜单，修改返回按钮
 
第五讲  Ionic中的UI 组件（UI Components）、 ionic3.x 中的css基本布局 颜色 按钮 图标01
 
第六讲  Ionic中的UI 组件（UI Components）、 ionic3.x 中的css基本布局 ionic 普通列表 图文列表 图标列表02
 
第七讲  Ionic中的UI 组件（UI Components）页面布局 、ionic3.x 中类似qq和微信的滑动列表03
 
第八讲  Ionic中的UI 组件（UI Components）页面布局   ionic3.x 中的表单  登录表单以及ionic中的栅格系统
 
第九讲  Ionic 中的Javascript扩展 ActionSheets  Alerts  Toast  Loadin
 
第十讲  Ionic 通过NavController实现路由跳转路由传值（补）
 
第十一讲  Ionic通过navPush属性实现路由跳转页面传值(补)
 
第十二讲  Ionic中的数据请求结合路由跳转实现内容管理系统【新闻列表、新闻详情】（上）
 
第十三讲  Ionic中的数据请求结合路由跳转实现内容管理系统【新闻列表、新闻详情】（下） 
 
第十四讲  Ionic中的ion-infinite-scroll上拉分页加载更多 
 
第十五讲  Ionic中的ion-refresher下拉更新 
 
第十六讲  Ionic仿京东商城项目功能分析 项目框架搭建 修改底部导航tabs颜色
 
第十七讲  仿京东商城项目首页页面布局 ion-slide轮播图 ion-scroll滑动列表   
 
第十八讲  Ionic仿京东商城项目首页列表 ion-row栅格布局  商品分类页面布局 flex  ion-row
 
第十九讲  Ionic仿京东商城项目购物车页面布局  rem
 
第二十讲  Ionic仿京东商城项目用户中心页面布局 ion-list  ion-item
 
第二十一讲  Ionic用户登录页面布局-修改
 
第二十二讲  Ionic仿京东商城项目注册流程讲解、用户注册页面、发送验证码、完成注册页面布局 
 
第二十三 讲  Ionic仿京东商城导航搜索、商品列表、搜索列表页面制作 ion-buttonsion-searchbar
 
第二十四讲  Ionic创建公共配置config 服务、创建请求数据的服务分析、以前的方法请求api接口
 
第二十五讲  Ionic创建公共配置文件、创建请求数据的服务、服务的方式请求api接口实现动态轮播图
 
第二十六讲  Ionic仿京东商城项目 首页请求商品动态数据
 
第二十七讲  Ionic仿照京东商城项目商品分类页面请求动态数据，实现tab切换
 
第二十八讲  Ionic商品列表页面动态数据请求 分页加载更多（上）
 
第二十九讲  Ionic搜索页面动态数据请求 分页加载更多（下）
 
第三十讲  Ionic3.x解决搜索页面回到顶部bug以及上拉更新bug 用到Content api
 
第三十一讲  Ionic搜索页面历史记录以及删除历史记录 用到ionic的gestures 手势事件和localStorage 以及Alert组件
 
第三十二讲  Ionic仿京东商城项目商品详情页面 头部底部制作ion-segment  ion-footerbar
 
第三十三讲  Ionic仿照京东商城项目详情页面布局
 
第三十四讲  Ionic 商品详情页面请求数据渲染数据
 
第三十五讲  Ionic注册流程 POST封装，以及POST发送验证码倒计时功能(上)
 
第三十六讲  Ionic注册流程 POST封装，以及POST发送验证码倒计时功能(中)
 
第三十七讲  Ionic注册流程 验证验证码、完成注册、保存用户信息(下)
 
第三十八讲  Ionic仿京东商城项目 登录  ionic生命周期函数ionViewWillEnter、ionViewDidEnter、ionViewWillLeave等（上）
 
第三十九讲  Ionic账户设置 退出登录（下）
 
第四十讲  Ionic仿京东商城项目 商品属性选择、增加到购物车(上)
 
第四十一讲  Ionic仿京东商城项目 商品属性选择、增加到购物车、显示购物车数据(中)
 
第四十二讲  Ionic仿京东商城项目 购物车列表筛选 购物车计算总价 数量加减购物车数据保存 去结算（下）
 
第四十三讲  Ionic仿京东商城项目 购物车全选反选 购物车loading  ion-spinner使用
 
第四十四讲  Ionic删除购物车数据
 
第四十五讲  Ionic确认订单 订单页面登录成功返回
 
第四十六讲  Ionic 仿京东商城项目 收货地址页面和 增加收货地址页面制作
 
第四十七讲  Ionic仿京东商城项目签名验证原理
 
第四十八讲  Ionic仿京东商城项目签名验证 增加收货地址、显示收货地址
 
第四十九讲  Ionic 仿京东商城项目 订单页面显示默认收货地址、切换收货地址
 
第五十讲  Ionic仿京东商城项目 编辑收货地址 删除收货地址
 
第五十一讲  Ionic仿京东商城项目 提交订单、去支付页面制作
 
第五十二讲  Ionic android 、ios支付宝支付准备工作 创建应用、生成签名、提交审核应用（1）
 
第五十三讲  Ionic+cordova支付宝支付流程以及实现Android支付(2)
 
第五十四讲  Ionic+cordova支付宝支付Ios支付(3)
 
第五十五讲  Ionic 打包成app_介绍
 第五十六讲  Nodejs的安装 Jdk的安装
 第五十七讲  Android studio的安装
 第五十八讲  Ionic cordova的安装、ionic项目创建、ionic项目运行到手机
 第五十九讲  项目导入到android studio  android studion 运行项目、修改项目ionic build 重新运行
 第六十讲  Android 打包以及升级打包
 
. . . . . .
 
已更新110讲
 
包括Angular基础入门、Ionic基础、Ionic仿京东商城项目、Ionic 打包android应用、ionic打包ios应用、上传Appstore、Ionic常见插件、以及ionic拍照上传、ionic升级应用、扫码二维码、微信支付、支付宝支付、微信登录、QQ登录、微信分享、QQ分享等  激光推送、热更新、Cordova+vue开发混合app教程等。需要了解更多教程详情的可以去官方看看。
 
 
 
 
 
 
 
 

ionic3升级到ionic4之后，大半年没升级了，一直用的版本是"@ionic/angular": "4.11.7"。
 
ionic4这个版本总体感觉还行，比较大的一个问题是，页面会飘，如果在ngOnInit里面渲染数据，在ionViewDidEnter则没有这个问题，但页面渲染会慢半拍。具体也没研究到底是什么问题，貌似主要是在苹果手机上有问题，也不一定是ionic问题，也可能是项目样式影响了过渡动画。自带的返回按钮偶尔也会自动消失，后来没用官方的返回按钮组件。
 
这几天不少项目发现头部标题开始飘了，后来发现是因为苹果系统升级后才出现这个问题，ionic升级到最新版本5后，问题修复。升级之后上面说的，页面会飘，貌似也修复了。
 
我目前升级到的最新版本是："@ionic/angular": "5.1.1"，升级还算比较顺利，基本没发现什么大坑。
 
目前发现最大的坑是移除了Events！
 
https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md
 
 
 还有就是ion-title组件，class有变更，title-ios貌似被移除了，也可能是配置有变更。后面再多观察测试下。
 
20200610
 
ionic5新建页面会多出一个路由文件*-routing.module.ts