环境

nodejs 10.11.0   
npm  webpack 4.35.2 
ionic 4.7.4  angular cli 8.2.2 
rxjs 6.4.0  
sass 1.22.2   typescript 3.4.3

具体安装流程见官网

ionic 是非常人性化的，在初始化项目的时候已经将基础架构创建好了，节省开发时间，提高了开发效率；ionic很清晰的区分ios与android的模式，组件有mode 'ios'和 'android'两种模式可供选择。

创建启动项目

$ ionic serve   【启动本地项目】
$ ionic g module  【组件库创建】
$ ionic g component  【组件创建】 【一个组件不能同时被多个父组件调用，需创建 module 实现多次调用】
$ ionic g page login/forgetpass    【创建主路径login下的子页面 forgetpass】

【创建组件】

多个页面共用组件，需先创建module 在module 中创建 component。
举个栗子：ionic g module module/modulename 创建完成ionic路径下会有一个包含modulename.module的module文件夹；
继续创建组件： ionic g component module/componentname 此时组件创建完成。

【组件传参】

@input
@output

【组件引用】

组件引用思路：需引用页面》组件的module》组件，依次引入组件《须在app.module中注册》

【服务】

数据交互，存储可以放在这里

{数据存储}：ionic storage 优点：自动检测存储存储顺序：IndexedDB, WebSQL, and localstorage 返回promise

async setData(key, value) {
    const res = await this.storage.set(key, value); ？
    console.log(res); 
}

async getData(key) {
    const keyVal = await this.storage.get(key);
    console.log('Key is', keyVal);
}

【服务创建】

ionic g service service/httpservice

可视化样式搭建

【css 默认主题样式】

全局mode ios/ md
ionic 默认样式格式 --background-color, sass
color: primary, secondary, danger, light, medium, dark, tertiary, success, warning

例css ： .radio {color : #ffffff; } ，ionic css： ion-radio {--color-checked : #ffffff;}

【常用组件解释】

【checkbox】

<ion-list>
    <ion-item *ngFor="let entry of form">
        <ion-label>{{entry.val}}</ion-label>
        <ion-checkbox slot="end" [(ngModel)]="entry.isChecked"></ion-checkbox>
    </ion-item>
</ion-list>

public form = [
    { val: 'Pepperoni', isChecked: true },
    { val: 'Sausage', isChecked: false },
    { val: 'Mushroom', isChecked: false }
];

【ion-card】

大投影,可当button模式

<ion-card-header> <ion-card-subtitle/ion-card-title>
<ion-card-content>

【ion-slides】

采用的 Swiper.js http://www.idangero.us/swiper/

options：{
 initialSlide: 1, //初始化展示的slide  只在初始化变化 如需重置 可以调 mySwiper.init()实现
     speed: 400 //滑动切换速度
}

event 事件

    ionSlideDidChange    //slide发生变化后触发事件
    ionSlideWillChange  //slide 变化之前触发
    ionSlideDrag    //slide拖拽监听 当滑块被移动时触发，但是在滑动过程中会多次触发？？
    ionSlideNextEnd   // 当下一个slide渲染结束时触发
    ionSlideNextStart // 当下一个slide开始渲染时触发
    ionSlidePrevEnd   // 当前一个slide渲染结束时触发
    ionSlidePrevStart  //  当前一个slide开始渲染时触发
    ionSlideReachEnd  //  官方说是在‘当滑块位于最后一张幻灯片时’实际是当滑动抵达倒数第二张的时候触发
    ionSlideReachStart  //同样

组件开发/交互

【页面跳转】

组件的[router-link] 带参
Nav 带参跳转，复杂参数
angular开发中的安全策略与img src的过滤

环境