ionic-cli 5+ angular 移动端开发

环境：

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

【具体安装流程见官网：https://ionicframework.com/docs/installation/cli】
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的过滤

环境：