https://my.oschina.net/metaphors/blog/1589379

本文為原創文章，轉載請標明出處

目錄

1. 貓眼API
2. HttpClient 實現 HTTP 請求
   • 安裝 HttpClientModule 模組
   • 建立 provider
   • 建立 page
3. 一些坑
   • 坑1: 未在 app.module.ts 中匯入 HttpClientModule
   • 坑2: Chrome 除錯時 CORS 問題
   • 坑3: WKWebView 問題
4. 更多

1. 貓眼API

當然是基於這篇古老的文章啦 ==> http://www.jianshu.com/p/9855610eb1d4
因為是2015年的文章，已經時隔2年多，很難確保API仍可使用，所以我親自進行了抓包，發現沒毛病還能用，並且還多發現了2個介面，現整理如下：

type ==> hot  型別（正在熱映）
offset  初始資料位置
limit   顯示資料最大上限值

type ==> coming  型別（即將上映）
offset  初始資料位置
limit   顯示資料最大上限值

movieid 電影id
offset  初始資料位置（最大為1000）
limit   顯示資料最大上限值（最大為15）

offset  初始資料位置（最大為1000）
limit   顯示資料最大上限值（最大為15）
startTime   評論初始時間

offset  初始資料位置
limit   顯示資料最大上限值

cinemaid    影院id
movieid     電影id
 

showId      放映id
showDate    放映時間

2. HttpClient 實現 HTTP 請求

安裝 HttpClientModule 模組

app.module.ts

...
import {HttpClientModule} from "@angular/common/http";
...

@NgModule({
  ...
  imports: [
    ...
    HttpClientModule,
    ...
  ]
  ...
})
...

建立 provider

終端執行:

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"];
    });
  }

}

建立 page

終端執行:

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. 一些坑

坑1: 未在 app.module.ts 中匯入 HttpClientModule

ionic g provider movies 命令執行後並未在 app.module.ts 中自動匯入 HttpClientModule。

坑2: Chrome 除錯時 CORS 問題

坑3: WKWebView 問題

emmm... 真機除錯的時候，Android 端木有問題，顯示正常，而 iOS 端啥都不顯示，不知道問題出在哪裡（我懷疑是 WKWebView 的 CORS 問題，求評論！！！），我的解決辦法是，降回到 UIWebView。

首先解除安裝 Ionic WebView 外掛

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

然後 config.xml

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

4. 更多