ionic混合开发app android学习笔记

1.Ionic4.x 目录结构分析e2e：端对端测试文件node_modules ：项目所需要的依赖包 resources ：android/ios 资源（更换图标和启动动画）src：开发工作目录，页面、样式、脚本和图片都放在这个目录下www：静态文件，ionic build --prod 生成的单页面静态资源文件platforms：生成android 或者ios 安装包需要的资源—(cordov

一个女程序媛

430人浏览 · 2020-07-23 10:52:06

一个女程序媛 · 2020-07-23 10:52:06 发布

1.Ionic4.x 目录结构分析
在这里插入图片描述
e2e：端对端测试文件
node_modules ：项目所需要的依赖包 resources ：android/ios 资源（更换图标和启动动画）
src：开发工作目录，页面、样式、脚本和图片都放在这个目录下
www：静态文件，ionic build --prod 生成的单页面静态资源文件
platforms：生成android 或者ios 安装包需要的资源—(cordova platform add android 后会生成)
plugins：插件文件夹，里面放置各种cordova 安装的插件
config.xml: 打包成app 的配置文件
package.json: 配置项目的元数据和管理项目所需要的依赖
ionic.config.json、ionic.starter.json：ionic 配置文件
angular.json angular 配置文件
tsconfig.json: TypeScript 项目的根目录，指定用来编译这个项目的根文件和编译选项
tslint.json：格式化和校验typescript

2.src下目录介绍
在这里插入图片描述
app：应用根目录（组件、页面、服务、模块…）
assets：资源目录（静态文件（图片，js 框架…）
theme：主题文件，里面有一个scss 文件，设置主题信息。
global.scss：全局css 文件
index.html：index 入口文件
main.ts：主入口文件
karma.conf.js/test.js：测试相关的配置文件
polyfills.ts: 这个文件包含Angular 需要的填充，并在应用程序之前加载

3.app下目录介绍
在这里插入图片描述
tabs:tab切换页面
app-routing.module.ts：路由配置文件
app.module.ts：根模块
根组件
4.Ionic4.x 中自定义公共模块
创建公共模块以及组件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SlideComponent } from './slide.component';
import {IonicModule} from '@ionic/angular';

@NgModule({
  declarations: [SlideComponent],
  imports: [
    CommonModule,
      IonicModule
  ],
    exports: [SlideComponent]
})
export class SlideModule { }

用到的地方引入自定义模块，并依赖注入自定义模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { SlideModule } from '../module/slide/slide.module';
import { IonicModule } from '@ionic/angular';
import { Tab4PageRoutingModule } from './tab4-routing.module';
import { Tab4Page } from './tab4.page';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
      SlideModule,
    Tab4PageRoutingModule
  ],
  declarations: [Tab4Page]
})
export class Tab4PageModule {}

使用自定义模块

<app-slide></app-slide>

5.page和module的区别
module是个空壳 page=module+加个默认的module+page+路由
使用上:
page一般创建的时候直接生成在根组件上的路由上，根据路由找到指定的page，对外暴露url
module需要手动在其他module上导入，在页面中使用module里面的组件，不对外暴露url

6.Ionic4.x 内置颜色
primary secondary tertiary success warning danger dark medium light
在这里插入图片描述

  <ion-button color="primary"> primary </ion-button>
  <ion-button color="secondary"> secondary </ion-button>
  <ion-button color="tertiary"> tertiary </ion-button>
  <ion-button color="success "> success  </ion-button>
  <ion-button color="warning"> warning </ion-button>
  <ion-button color="danger"> danger </ion-button>
  <ion-button color="dark"> dark </ion-button>
  <ion-button color="medium "> medium  </ion-button>
  <ion-button color="light "> light  </ion-button>

expand 设置按钮的宽度不设置就是默认描述宽度

<ion-button color="primary" expand="block"> button </ion-button>
<ion-button color="primary" expand="full"> button </ion-button>

fill 设置背景填充
clear 具有类似于扁平按钮的透明背景的按钮。
outline 具有透明背景和可见边框的按钮。
solid 按钮具有填充的背景。用于工具栏中的按钮

<ion-button expand="full" fill="outline">Outline + Full</ion-button>
<ion-button fill="clear" color="success">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid" (click)="goBack()">
<ion-icon name="ios-arrow-back" slot="start"></ion-icon>
	返回
</ion-button>

size 设置按钮的大小
small 小按钮
default 默认按钮
large 大按钮

ionic 中的图标
ionic 图标官网：https://ionicons.com/
name 指定图标的名称 slot 指定图标的位置:

<ion-icon slot="start" name="star"></ion-icon>

ion-header 、ion-footer 、ion-content 、ion-toolbar 、ion-title 、ion-buttons 、ion-back-button
官方文档：https://ionicframework.com/docs/api/toolbar
ion-header 头部，ion-content 内容，ion-footer 底部
ion-toolbar 主要用于头部和底部，固定在页面顶部或者底部。
ion-title 放在ion-toolbar 里面指定导航的名称
ion-buttons 按钮组，主要用在ion-toolbar 中，工具栏中的按钮应该放在ion-buttons 的内部。
ion-back-button 返回按钮，放在ion-buttons 里面
ion-buttons 里面的属性：

secondary 元素在ios 模式下位于内容左侧，在md 模式下直接位于内容右侧。
primary 元素在ios 模式下位于内容右侧，在md 模式下位于最右
start 在LTR 中位于内容的左侧，在RTL 中位于内容的右侧。
end 在LTR 中位于内容的右侧，在RTL 中位于内容的左侧。

导航返回也可以指定返回的地址
使用defaultHref

 <ion-buttons slot="start">
     <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
    </ion-buttons>

8.列表
普通列表如果普通列表加上路由跳转的话列表将会自动加上箭头

<ion-list>
<ion-item>
<ion-label>Peperoni</ion-label>
</ion-item>
<ion-item>
<ion-label>Hawaii</ion-label>
</ion-item>
</ion-list>

分组列表ion-item-divider

<ion-list>
<ion-item-divider>
<ion-label>
Section A
</ion-label>
</ion-item-divider>
<ion-item><ion-label>A1</ion-label></ion-item>
<ion-item><ion-label>A2</ion-label></ion-item>
<ion-item><ion-label>A3</ion-label></ion-item>
<ion-item-divider>
<ion-label>
Section B
</ion-label>
</ion-item-divider>
<ion-item><ion-label>B1</ion-label></ion-item>
<ion-item><ion-label>B2</ion-label></ion-item>
<ion-item><ion-label>B3</ion-label></ion-item>
</ion-list>

在这里插入图片描述
带图标列表：

<ion-list>
<ion-item>
<ion-icon slot="start" name="people"></ion-icon>
<ion-label>个人中心</ion-label>
<ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-item>
<ion-item>
<ion-icon slot="start" name="wallet" color="success"></ion-icon>
<ion-label>钱包</ion-label>
<ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-item>
</ion-list>

在这里插入图片描述
列表中的头像

<ion-list>
  <ion-item>
    <ion-avatar>
      <img src="assets/01.png">
    </ion-avatar>
    <ion-label>沃尔玛无人收银系统</ion-label>
  </ion-item>
  <ion-item>
    <ion-avatar>
      <img src="assets/02.png">
    </ion-avatar>
    <ion-label>Hawaii</ion-label>
  </ion-item>
  <ion-item>
    <ion-avatar>
      <img src="assets/03.png">
    </ion-avatar>
    <ion-label>haha </ion-label>
  </ion-item>
</ion-list>

在这里插入图片描述
列表中的图片ion-thumbnail

<ion-list>
  <ion-item>
    <ion-thumbnail slot="start">
      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
    </ion-thumbnail>
    <ion-label>Peperoni</ion-label>
  </ion-item>
  <ion-item>
    <ion-thumbnail slot="start">
      <img src="assets/03.png">
    </ion-thumbnail>
    <ion-label>Hawaii</ion-label>
  </ion-item>
  <ion-item>
    <ion-thumbnail slot="end">
      <img src="assets/01.png">
    </ion-thumbnail>
    <ion-label>Hawaii</ion-label>
  </ion-item>
  <ion-item>
    <ion-thumbnail slot="end">
      <img src="assets/02.png">
    </ion-thumbnail>
    <ion-label>Hawaii</ion-label>
  </ion-item>
  <ion-item>
    <ion-thumbnail slot="end">
      <img src="assets/03.png">
    </ion-thumbnail>
    <ion-label>Hawaii</ion-label>
  </ion-item>
</ion-list>

滑动列表

<ion-list>
  <ion-item-sliding>
    <ion-item>
      <ion-label>Item1</ion-label>
    </ion-item>
    <ion-item-options side="start">
      <ion-item-option (click)="favorite(item)">Favorite</ion-item-option>
      <ion-item-option color="primary" (click)="share(item)">Share</ion-item-option>
    </ion-item-options>
    <ion-item-options side="end">
      <ion-item-option (click)="unread(item)">Unread</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
  <ion-item-sliding>
    <ion-item>
      <ion-label>Item2</ion-label>
    </ion-item>
   23424
    <ion-item-options side="start">
      <ion-item-option color="success">Favorite</ion-item-option>
      <ion-item-option color="primary" (click)="share(item)">Share</ion-item-option>
    </ion-item-options>
    <ion-item-options side="end">
      <ion-item-option color="success">Unread</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

ion-list上的 lines=“full” 下划线顶格显示

9.表单相关组件
ion-input 单行文本框

 <ion-list>
    <ion-item>
      <ion-label>用户名:</ion-label>
      <ion-input [(ngModel)]="peopleInfo.username"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>年龄:</ion-label>
      <ion-input [(ngModel)]="peopleInfo.age"></ion-input>
    </ion-item>
  </ion-list>

ion-toggle 开关

<ion-item>
    <ion-label>是否本科</ion-label>
    <ion-toggle slot="end" [(ngModel)]="peopleInfo.falg"></ion-toggle>
</ion-item>

ion-radio-group、ion-radio 单选按钮组

<ion-list>
    <ion-radio-group [(ngModel)]="peopleInfo.payType">
        <ion-item>
            <ion-avatar slot="start">
                <img src="assets/alipay.png">
            </ion-avatar>
            <ion-label>支付宝</ion-label>
            <ion-radio value='1' slot="end"></ion-radio>
        </ion-item>
        <ion-item>
            <ion-avatar slot="start">
                <img src="assets/weixinpay.png">
            </ion-avatar>
            <ion-label>微信</ion-label>
            <ion-radio value='2' slot="end"></ion-radio>
        </ion-item>
    </ion-radio-group>
</ion-list>

ion-checkbox 多选按钮组

 <ion-item *ngFor="let item of peopleInfo.checkBoxList">
        <ion-label>{{item.val}}</ion-label>
        <ion-checkbox slot="start" [(ngModel)]="item.isChecked"></ion-checkbox>
    </ion-item>

ion-select 选择框

<ion-list>
    <ion-select slot="end" [(ngModel)]="peopleInfo.city">
        <ion-select-option *ngFor="let item of peopleInfo.cityList" [value]="item">{{item}}</ion-select-option>
    </ion-select>
</ion-list>

ion-textarea 多行文本框

<ion-list>
    <ion-item>
        <ion-textarea [(ngModel)]="peopleInfo.info"></ion-textarea>
    </ion-item>
</ion-list>

输入框是ion-item包裹一个ion-label和一个ion-input

checkbox是遍历一个数组，item包裹一个ion-label和一个ion-checkbox

单选框radio，ion-radio-group上绑定数据，包裹多个ion-item，ion-item再包裹一个ion-babel和一个ion-radio

下拉框是ion-select包裹一个ion-select-option

ion-textarea是简化版本的输入框，直接ion-item包裹一个ion-textarea

9.Ionic4.x Theming（主题）
Ionic4.x 修改主题颜色的话需要在src/theme/variables.scss 文件中修改。
Ionic4.x 增加内置主题颜色
找到src/theme/variables.scss 文件，如下代码新增favorite 颜色
.ion-color-favorite {
–ion-color-base: #69bb7b;
–ion-color-base-rgb: 105,187,123;
–ion-color-contrast: #ffffff;
–ion-color-contrast-rgb: 255,255,255;
–ion-color-shade: #5ca56c;
–ion-color-tint: #78c288;
}
用法：

<ion-button color="favorite">
自定义颜色
</ion-button>

修改内置组件默认样式
找到src/theme/variables.scss 文件修改ion-button 的默认样式。
ion-button {
–color: #222;
–background:red;
}
修改底部Tabs 背景颜色以及按钮颜色

<ion-tabs>
    <ion-tab-bar slot="bottom" color="favorite">
        <ion-tab-button tab="tab1">
            <ion-icon name="flash"></ion-icon>
            <ion-label>Tab One</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="tab2">
            <ion-icon name="apps"></ion-icon>
            <ion-label>Tab Two</ion-label>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

.ion-color-favorite {
–ion-color-base: #69bb7b; //背景颜色
–ion-color-base-rgb: 105,187,123;
–ion-color-contrast: #ffffff;//c参照颜色，就是不选中的时候的颜色
–ion-color-contrast-rgb: 255,255,255;
–ion-color-shade: #5ca56c;
–ion-color-tint: #78c288;
}
contrast 对比色，比如底部tabs 的颜色是#69bb7b 则里面按钮的颜色是#fff

11.Modal 模态对话框使用
新建一个model 页面以及在model 页面下面新建一个组件。
ionic g page model 建立页面
ionic g component model/components/login 建立组件
在model 页面所在的模块model.module.ts中引入刚才创建的login 组件，并声明

import { LoginComponent} from './components/login/login.component';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        RouterModule.forChild(routes)
    ],
    declarations: [ModelPage,LoginComponent],
    entryComponents: [LoginComponent]
})

entryComponents:[LoginComponent]，这个需要手动加一下
在modal 页面中引入刚才创建的login 组件，并且引入ModalController 弹出模态对话框，代码如下：

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { LoginComponent } from '../components/login/login.component';
@Component({
    selector: 'app-modal',
    templateUrl: './modal.page.html',
    styleUrls: ['./modal.page.scss'],
})
export class ModalPage implements OnInit {
    constructor(public modalController: ModalController) {}
    ngOnInit() {
    }
    async presentModal() {
        const modal = await this.modalController.create({
            showBackdrop:true,
            component: LoginComponent,
            componentProps: { value: 123 }
        });
        return await modal.present();
    }
}

Modal 页面给弹出的组件传值

①、modal 页面在componentProps 中给弹出的组件页面传值

const modal = await this.modalController.create({
    showBackdrop:true,
    component: LoginComponent,
    componentProps: { value: 123 }
});
return await modal.present();

②、弹出的组件页面通过NavParams 接受modal 页面的传值

import { Component, OnInit,Input } from '@angular/core';
import { NavParams } from '@ionic/angular';
@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
    @Input() aid: any;
    constructor(public navParams: NavParams) {
// componentProps can also be accessed at construction time using NavParamsns
        console.log(this.navParams);
    }
    ngOnInit() {
    }
    closeModel(){
        this.navParams.data.modal.dismiss({
            'result': '消失的时候返回的内容'
        });
    }
}

弹出的组件关闭的时候给modal 页面传值
①、modal 监听关闭事件

async showModel(){
    const modal = await this.modalController.create({
        component: LoginComponent,
        componentProps: { aid: '123' }
    });
    await modal.present();
//监听销毁的事件
    const { data } = await modal.onDidDismiss();
    console.log(data);
}

②、Login 组件关闭的时候传入数据

closeModel(){
    this.navParams.data.modal.dismiss({
        'result': '消失的时候返回的内容'
    });
}

import { Component, OnInit,Input } from '@angular/core';
import { NavParams } from '@ionic/angular';
@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
    @Input() aid: any;
    constructor(public navParams: NavParams) {
// componentProps can also be accessed at construction time using NavParamsns
        console.log(this.navParams);
    }
    ngOnInit() {
    }
    doClose(){
        this.navParams.data.modal.dismiss({
            'result': '消失的时候返回的内容'
        });
    }
}

<ion-header>
    <ion-toolbar>
        <ion-title>用户登录</ion-title>
        <ion-buttons slot="end">
            <ion-button (click)="doClose()">
                <ion-icon slot="icon-only" name="close"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content padding>

    <ion-list>
        <ion-item>
            <ion-label>用户名：</ion-label>
            <ion-input></ion-input>
        </ion-item>
        <ion-item>
            <ion-label>密　码：</ion-label>
            <ion-input></ion-input>
        </ion-item>

    </ion-list>

    <ion-button (click)="doLogin()" extends="block">
        登录
    </ion-button>
</ion-content>

通过navParams来获取model和传递的值
model组件的引入
model组件的传值，父组件给model组件传值
获取model组件
关闭model组件, 父组件监听事件，model组件关闭组件方法中给父组件传值

12.ion-infinite-scroll上拉分页加载更多
ion-infinite-scroll 上拉分页加载更多

<ion-content>
    <ion-list>
        <ion-item *ngFor="let item of data">
            {{item}}
        </ion-item>
    </ion-list>
    <ion-infinite-scroll #myInfiniteScroll threshold="100px" (ionInfinite)="loadData($event)">
        <ion-infinite-scroll-content
                loadingSpinner="bubbles"
                loadingText="Loading more data...">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>

ion-infinite-scroll 请求api 接口实现上拉分页加载更多

总结:
1.ion-infinite-scroll 加载完成一次后需要调用的方法,用于更新数据
event.target.complete();
2.禁用ion-infinite-scroll
可以用js或者都没属性，原理都一样都是让 disable=true
event.target.disabled = true;