IONIC3 Study Notes (13) HttpClient implements HTTP requests and some pits that have been stepped

This article is original article, reprint please indicate the source

Catalogue

1. Cat Eye API
2. HttpClient Implementing HTTP Requests
   • Installing the Httpclientmodule module
   • Create Provider
   • Create page
3. Some pits
   • Pit 1: not app.module.ts imported inHttpClientModule
   • The problem of CORS in pit 2:chrome debugging
   • Pit 3:wkwebview Problem
4. More

1. Cat's Eye API

Of course it's based on this old article. ==> http://www.jianshu.com/p/9855610eb1d4
Because it is a 2015 article, has been a lapse of more than 2 years, it is difficult to ensure that the API can still be used, so I personally carried out the grab bag, found that there is no problem can be used, and also found 2 more interfaces, now organized as follows:

Aggressively movie list:
Http://m.maoyan.com/movie/list.json?type=hot&offset=0&limit=1
Request:

type ==> hot  类型（正在热映）offset  初始数据位置limit   显示数据最大上限值

Upcoming Movie Listings:
Http://m.maoyan.com/movie/list.json?type=coming&offset=0&limit=1
Request:

type ==> coming  类型（即将上映）offset  初始数据位置limit   显示数据最大上限值

Movie Details:
Http://m.maoyan.com/movie/342068.json
Request:
Follow the movie ID later

Latest Essays List 1:
Http://m.maoyan.com/comments.json?movieid=342068&offset=0&limit=1
Request:

movieid 电影idoffset  初始数据位置（最大为1000）limit   显示数据最大上限值（最大为15）

Latest Essays List 2:
http://m.maoyan.com/mmdb/comments/movie/342068.json?offset=0&limit=1&startTime=2017-12-01%2008:00:00
Request:
Follow the movie ID.

offset  初始数据位置（最大为1000）limit   显示数据最大上限值（最大为15）startTime   评论初始时间

Comment Reply list:
Http://m.maoyan.com/mmdb/replies/comment/129764411.json?offset=0&limit=1
Request:
Follow the comment ID

offset  初始数据位置limit   显示数据最大上限值

Local Cinema list:
Http://m.maoyan.com/cinemas.json
Get local cinema list based on IP segment

Show Timetable:
http://m.maoyan.com/showtime/wrap.json?cinemaid=1181&movieid=343905
Request:

cinemaid    影院idmovieid     电影id

Select seat Purchase ticket details:
http://m.maoyan.com/show/seats?showId=70157&showDate=2017-12-09
Request:

showId      放映idshowDate    放映时间

2. HttpClient Implementing HTTP Requests Installing the Httpclientmodule module

app.module.ts

...import {HttpClientModule} from "@angular/common/http";...@NgModule({  ...  imports: [    ...    HttpClientModule,    ...  ]  ...})...

Create provider

Terminal operation:

ionic g provider movies

movies.ts

import {HttpClient} from ‘@angular/common/http‘;import {Injectable} from ‘@angular/core‘;@Injectable()export class MoviesProvider {  hotMovies: any[];  constructor(public http: HttpClient) {    this.getHotMovies();  }  getHotMovies() {    let hotMoviesUrl: string = "https://m.maoyan.com/movie/list.json?type=hot&offset=0&limit=100";    this.http.get(hotMoviesUrl).subscribe(data => {      this.hotMovies = data["data"]["movies"];    });  }}

Create page

Terminal operation:

ionic g page movie

movie.html

<ion-header>  <ion-navbar>    <ion-title>电影</ion-title>  </ion-navbar></ion-header><ion-content>  <ion-list>    <button ion-item *ngFor="let movie of moviesProvider.hotMovies">      {{movie["nm"]}}    </button>  </ion-list></ion-content>

movie.ts

import {Component} from ‘@angular/core‘;import {IonicPage, NavController, NavParams} from ‘ionic-angular‘;import {MoviesProvider} from "../../providers/movies/movies";@IonicPage({  priority: ‘high‘})@Component({  selector: ‘page-movie‘,  templateUrl: ‘movie.html‘,})export class MoviePage {  constructor(public navCtrl: NavController, public navParams: NavParams, public moviesProvider: MoviesProvider) {  }  ionViewDidEnter() {    console.log(this.moviesProvider.hotMovies);  }}

3. Some pits Pit 1: not app.module.ts imported HttpClientModule in

ionic g provider moviesThe command was not automatically imported after it was executed app.module.ts HttpClientModule .

The problem of CORS in pit 2:chrome debugging

The easiest way is to install the Allow-control-allow-origin plugin for Chrome, link ==> https://chrome.google.com/webstore/search/ ALLOW-CONTROL-ALLOW-ORIGIN?HL=ZH-CN the first one is.

Pit 3:wkwebview Problem

Emmm ... When the real machine debugging, Android DUANMU problems, display normal, and IOS do not show anything, do not know where the problem (I suspect is wkwebview CORS problem, ask for comment!!! ), my solution is to drop back to UIWebView.

First uninstall the Ionic WebView plugin

ionic cordova plugin remove cordova cordova-plugin-ionic-webview --saveionic cordova platform rm iosionic cordova platform add iosionic cordova build ios --prod

And thenconfig.xml

<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />

4. More

Angular-httpclient
Angular-api-httpclient
Ionic-wkwebview

If there is any improper, please correct, thank you ~

IONIC3 Study Notes (13) HttpClient implements HTTP requests and some pits that have been stepped