• 如题，将记录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