快应用技术干货分享（第四篇）

上一篇中我们把应用需要的页面搭建了出来，已经可以看出整个应用的雏形了，可是数据都还是写死在模板中的，所以接下来我们把数据接口中的动态数据接入，让我们的应用真正可用起来。

1.  查询正在上映的院线电影列表

接口功能

获取院线正在上映的电影列表

URL

https://api.douban.com/v2/movie/in_theaters

支持格式

JSON

HTTP请求方式

GET

请求参数

参数	必选	类型	默认值	说明
count	false	int	20	请求的电影列表每页的数量
start	false	int	0	请求的电影列表开始的位置
city	false	string	'北京'	请求所在城市的电影列表

返回字段

返回字段	字段类型	说明
count	int	电影列表每页的数量
start	int	请求的电影列表开始的位置
total	int	列表全部元素数量
subjects	array	电影列表数据
title	string	标题

接口示例

地址：https://api.douban.com/v2/movie/in_theaters?count=10&city=深圳&start=0

 

{
 "count": 20,
 "start": 0,
 "total": 38,
 "subjects": [···],
 "title": "正在上映的电影-深圳"
}

 

2.  查询即将上映的院线电影列表

接口功能

获取即将上映的电影列表

URL

https://api.douban.com/v2/movie/coming_soon

支持格式

JSON

HTTP请求方式

GET

请求参数

参数	必选	类型	默认值	说明
count	false	int	20	请求的电影列表每页的数量
start	false	int	0	请求的电影列表开始的位置

返回字段

返回字段	字段类型	说明
count	int	电影列表每页的数量
start	int	请求的电影列表开始的位置
total	int	列表全部元素数量
subjects	array	电影列表数据
title	string	标题

接口示例

地址：https://api.douban.com/v2/movie/coming_soon?count=10&start=0

{
 "count": 20,
 "start": 0,
 "total": 38,
 "subjects": [···],
 "title": "即将上映的电影"
}

 

3.  查询豆瓣电影TOP250电影列表

接口功能

获取豆瓣电影TOP250电影列表

URL

https://api.douban.com/v2/movie/top250

支持格式

JSON

HTTP请求方式

GET

请求参数

参数	必选	类型	默认值	说明
count	false	int	20	请求的电影列表每页的数量
start	false	int	0	请求的电影列表开始的位置

返回字段

返回字段	字段类型	说明
count	int	电影列表每页的数量
start	int	请求的电影列表开始的位置
total	int	列表全部元素数量
subjects	array	电影列表数据
title	string	标题

接口示例

地址：https://api.douban.com/v2/movie/top250?count=10&start=0

{
 "count": 20,
 "start": 0,
 "total": 38,
 "subjects": [···],
 "title": "豆瓣电影Top250"
}

 

4.  查询单个电影详情信息

接口功能

获取单个电影详情信息

URL

https://api.douban.com/v2/movie/subject/:movie_id

支持格式

JSON

HTTP请求方式

GET

返回字段

字段太多请自行点开下面的接口示例查看

接口示例

地址：https://api.douban.com/v2/movie/subject/3168101

 

{
 "id": "3168101",
 "title": "毒液：致命守护者",
 "year": "2018",
 "directors": [···],
 "original_title": "Venom",
 ···
}

请求数据的方法

有了数据接口，接下来就是要发起请求了，在快应用中提供了请求数据的系统接口@sytem.fetch。接口的使用按照下列步骤进行。

• 在manifest.json文件中的feature字段下声明要使用的接口

 

{
   ···
   "feature": [
       {"name": "system.fetch"},
       ···
   ]
}

• 在要使用接口的位置导入

 

import fetch from '@system.fetch'