ionic学习笔记

1. ionic项目文件分析
   

2. ionic创建页面 及 页面跳转
   
   创建一个跳转的页面 news 页面

ionic g page news

————————————————————————————————————————
练手

1. 通过命令创建ionic项目（创建一个含有tab栏的ionic项目）

ionic start myApp tabs

2. 创建服务（涉及到请求数据）(在app中创建services文件夹，在services文件夹下面创建http.services.ts文件)

ionic g service services/http

4. 在app.module.ts中添加http模块

5. 在http.services.ts文件中引入HttpClient服务，然后注入服务，通过this.http.get来封装请求方法

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class HttpService {
  // 声明
  constructor(public http: HttpClient) { }

  // 封装方法
  get(api) {
    // this.http.get(api).subscribe((response) => {
    //   // 成功的回调函数
    // }, (err) => {
    //   // 失败的回调函数
    // });

    // 请求方法是异步的
    // 使用Promise
    return new Promise((resolve, reject) => {
      this.http.get(api).subscribe((response) => {
          // 成功的回调函数
          resolve(response);
        }, (err) => {
          // 失败的回调函数
          reject(err);
        });
    });
  }
}

5. 在app.module.ts中引入公共的服务

6. 在页面中使用服务
在使用界面的ts中引入服务

7. 通过接口请求数据 然后使用数据

import { Component } from '@angular/core';
import { HttpService } from '../services/http.service';
@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  // 声明数组  存储请求接口请求到的数据
  public list: any[] = [];

  // 分页  默认显示第一页
  public page: any = 1;

  // 在构造函数中声明公共服务
  constructor(public service: HttpService) {
    // 在页面加载的时候   调用请求数据的方法
    this.requestData();

    // 调用分页方法
    this.loadMore(null);
  }

  // 请求方法
  requestData() {
    // 请求数据的接口
    const api = 'http://www.phonegap100.com/appapi.php??a=getPortalList&catid=20&page=1';
    // 调用请求方法
    this.service.get(api).then((response: any) => {
      // 接口里面的所有数据都放在result里面
      this.list = response.result;
    }).catch((err) => {
      console.log(err);
    });
  }

  // 上滑加载更过
  loadMore(event) {
    const api = 'http://www.phonegap100.com/appapi.php??a=getPortalList&catid=20&page=' + this.page;
    // 调用请求方法
    this.service.get(api).then((response: any) => {
      // 接口里面的所有数据都放在result里面
      // this.list = response.result;

      // 做数据的拼接  (将之前请求的数据  和  当前请求的数据拼接起来)
      this.list = this.list.concat(response.result);

      // 一页请求完成之后将显示的页面  加1 (让加载的page自增)
      ++this.page;

      // 如果页面加载的数据条数大于本身存在的数据  就将  event.target.complete()  禁用掉
      // 判断数据是否在加载完成
      if (response.result.length < 20) {
        // tslint:disable-next-line:no-unused-expression
        event ? event.target.disabled = true : '';
      }

      // 请求完成之后   如果不调用这个方法上滑分页就会卡死
      // 判断 event 对象是否存在
      // tslint:disable-next-line:no-unused-expression
      event ? event.target.complete() : '';
    }).catch((err) => {
      console.log(err);
    });
  }
}

8. 页面跳转传递数据
   通过命令创建跳转的详情页面
   
   实现 ---- 详情页面的返回
   
   获取跳转传递过来的参数
   
9. 根据页面跳转传递的参数（条件） 来 请求数据