Ionic3学习笔记（十三）HttpClient 实现 HTTP 请求以及踩过的一些坑
Ionic3学习笔记（十三）HttpClient 实现 HTTP 请求以及踩过的一些坑
1. 猫眼API
当然是基于这篇古老的文章啦 ==> http://www.jianshu.com/p/9855610eb1d4 因为是2015年的文章，已经时隔2年多，很难确保API仍可使用，所以我亲自进行了抓包，发现没毛病还能用，并且还多发现了2个接口，现整理如下：
正在热映电影列表： http://m.maoyan.com/movie/list.json?type=hot&offset=0&limit=1 Request：
type ==> hot 类型（正在热映）
offset 初始数据位置
limit 显示数据最大上限值即将上映电影列表： http://m.maoyan.com/movie/list.json?type=coming&offset=0&limit=1 Request：
type ==> coming 类型（即将上映）
offset 初始数据位置
limit 显示数据最大上限值电影详情： http://m.maoyan.com/movie/342068.json Request： 后面跟上电影id即可
最新短评列表1： http://m.maoyan.com/comments.json?movieid=342068&offset=0&limit=1 Request：
movieid 电影id
offset 初始数据位置（最大为1000）
limit 显示数据最大上限值（最大为15）最新短评列表2： http://m.maoyan.com/mmdb/comments/movie/342068.json?offset=0&limit=1&startTime=2017-12-01%2008:00:00 Request： 后面跟上电影id
offset 初始数据位置（最大为1000）
limit 显示数据最大上限值（最大为15）
startTime 评论初始时间评论回复列表： http://m.maoyan.com/mmdb/replies/comment/129764411.json?offset=0&limit=1 Request： 后面跟上评论id
offset 初始数据位置
limit 显示数据最大上限值本地影院列表： http://m.maoyan.com/cinemas.json 根据ip段获取本地影院列表
放映时刻表： http://m.maoyan.com/showtime/wrap.json?cinemaid=1181&movieid=343905 Request：
cinemaid 影院id
movieid 电影id选座购票详情： http://m.maoyan.com/show/seats?showId=70157&showDate=2017-12-09 Request：
showId 放映id
showDate 放映时间2. HttpClient 实现 HTTP 请求
安装 HttpClientModule 模块
app.module.ts
...
import {HttpClientModule} from "@angular/common/http";
...
@NgModule({
...
imports: [
...
HttpClientModule,
...
]
...
})
...创建 provider
终端运行:
ionic g provider moviesmovies.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 moviemovie.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 问题
最简单的办法就是给 Chrome 安装 Allow-Control-Allow-Origin 插件了，链接 ==> https://chrome.google.com/webstore/search/Allow-Control-Allow-Origin?hl=zh-CN 第一个就是。
坑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. 更多
Angular - HttpClient Angular - API - HttpClient Ionic - WKWebView