【ionic4】开发随笔（停止更新，推荐使用UniApp开发）

ionic开发notice：
ionic 开发android 环境搭建：https://blog.youkuaiyun.com/simple__dream/article/details/82119920  
视频讲解地址：https://www.itying.com/goods-1067.html

官方API: https://ionicframework.com/docs

ionic命令：

ionic start  新建项目
ionic serve  浏览器运行
ionic cordova platform add android       添加到android平台
ionic cordova build android                   编译
ionic cordova run android            真机运行
cd.. 回退上一级目录
ionic cordova platform rm android  移除android项目

ionic cordova build android
ionic cordova run android

ionic g --help  //添加新东西
--------------------
ionic g page newpage 新建一个页面
ionic g module module/slide 创建一个模块
ionic g component module/slide  创建一个组件

点击按钮跳转页面：敲击方法：i4-butt 选择提示    其中 ng-rout 选择提示有Link的  剪切出来  
    <ion-button color="primary" [routerLink]="[ '/newpage']"> 
            跳转到组件页面
    </ion-button> 
返回按钮：敲击方法：i-back  提示
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
循环列表加载： ngfor
  <ion-list>
    <ion-item  *ngFor="let item of list">
      <ion-label>{{item}}</ion-label>
    </ion-item>
  </ion-list>
ts中:
public list: any = []; 定义变量
ngOninit中：初始化数据
    for (var i = 0; i < 10; i++) {
      this.list.push(`这是第${i}条数据`)  //这里面不是单引号和双引号 是英文下的 1旁边的那个
    }

ionic 图标库：www.ionic.wang

-----
ionic4使用公共模块方法步骤：
1.创建公共模块以及组件
ionic g module module/slide
ionic g component module/slide
2.修改src\app\slide\slide.component.spec.ts里报错的文件
3.src\app\slide\slide.module.ts文件中
引入import { SlideComponent } from './slide.component'; 
并爆漏 exports:[SlideComponent]，没有自动生成  declarations: [SlideComponent],[]中要填入
4.src\app\tab2\tab2.module.ts谁要使用那就在此文件中引入 
import { SlideModule } from '../slide/slide.module'; 并 在ionicMoudle 中申明
5.src\app\tab2\tab2.page.html在该文件中使用模块组件 <app-slide><app-slide/> 
在src\app\slide\slide.component.ts文件中可以看到selector: 'app-slide',引号里就是使用标签

-----------------
配置android和iOS用同一种样式
1.进入到 app.module.ts.文件中 ，
2.修改imports 中的  forRoot 参数  
imports: [BrowserModule, IonicModule.forRoot({
    mode:'ios',// 配置 Android 和iOS 用统一的样式
    backButtonText:'返回',//配置  默认返回的文字
  }), AppRoutingModule],
-------------------
设置页面返回上一级
1.逻辑模块ts中引入 import { NavController } from '@ionic/angular';
2.构造函数中申明    constructor(public nav:NavController) { }
3.js设置方法  
  //页面返回js
goBack(){
    this.nav.navigateBack('/tabs/tab2');
    console.log("---页面返回上一级--");
  }
------------------------
  ionic4 在android平台上监听物理返回键

此方法可以是监听返回键

this.platform.backButton.subscribe(() => {

//this.appMinimize.minimize();

//测试吐司

this.presentToast();

});

------------------------------------

Ionic4.x 中的轮播图用法
1.在视图中 
  <ion-slides pager="true" [options]="slideOpts">
    <ion-slide *ngFor="let item of slideImages">
      <ion-img [src]="item"></ion-img> --这里用 Img 标签效果更好
    </ion-slide>
  </ion-slides>
  2.在逻辑业务ts中 增加变量

  //设置轮播图属性 基于swiper
  private  slideOpts = {
    effect: 'flip',
    speed: 500,
    loop: true,
    autoplay:{
      delay:3000
    }
  };
  --------------------
  文字跑马灯组件（html）
  <marquee width='380' direction='left'>这是滚动文字这是滚动文字</marquee>
  ------------
  按钮设置背景色为透明 ：即设置 ion-button 里的  fill 属性
      <ion-button (click)="onClick()" slot="end"fill="clear">
        <ion-icon name="contacts" slot="icon-only"></ion-icon>
    </ion-button>

       ion-icon 修改图标  没有找到更快捷的方法    
    <ion-icon name="contacts"></ion-icon>
----------------------------
元素居中问题  https://www.cnblogs.com/xiuqian/p/6424127.html
----------------------  
加载地图：https://www.jianshu.com/p/4de365c55668
 ionic4 生命周期函数：https://blog.youkuaiyun.com/wei11556/article/details/56484718