微信小程序调用豆瓣电影API(详细)
首先给出现在可以使用(有返回值的)的API网址
正在热映的影片
https://douban.uieee.com/v2/movie/in_theaters
豆瓣排行前250的影片
https://douban.uieee.com/v2/movie/top250
即将上映的影片
https://douban.uieee.com/v2/movie/coming_soon
现在是获取数据的过程
1.在 JS 文件中声明一个变量
Page({
data: {
movie: [] //存储我们得到的信息
}
})
2.我们写一个获取信息的函数
loadMovie: function () {
var that = this; // 大家可以将that看为全局变量 (我c语言学得多)
wx.request({
url: 'https://douban.uieee.com/v2/movie/in_theaters',
//url 中输入我们的API网址;
//想获取排名就粘入排名的API网址
// header: {
// 'content-type': 'application/json'
//这是默认的格式,这种格式我们获取不了API提供的信息
//(我也不知道为啥,大家知道的话可以告诉我一下2333)
// },
header: {
"Content-Type": "application/text" //我们要改为text
},
success(res) {
var subjests = res.data; //res.data 是我们获取的信息
//下面我告诉大家为什么这样写
that.setData({
movies: subjests["subjects"], //将我们需要的信息存储
});
}
})
我们打开 当前热映的API网址
链接: 豆瓣当前热映.
用 Google Chrome打开,我们进到开发者工具
Windows用户 按F12
Mac OS 用户 按 command+option+I
进到开发者模式后我们可以看见
啥都看不懂
给大家教怎么看
在 console 中
声明一个变量 var a
var a = (全选页面的代码粘入) 回车
输入 a 回车
如下
step1
step2
再输入 a 回车
现在我们可以看到详细信息了
(是不是感觉成功了)
再看我们为什么这样写
success(res) {
var subjests = res.data; //res.data 是我们获取的信息
//下面我告诉大家为什么这样写
that.setData({
movies: subjests["subjects"], //将我们需要的信息存储
});
每一部影片的详情都是存储在一个subjects[ ] 中的
已知 var subjects=res.data 是总体数据
我们需要的正是总体数据中的subjects
所以我们给 movies 赋值 subjects[“subjects”]
到此为止我们获取信息的函数就写完了
3.我们需要调用, 我们在onload函数中调用它。
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.loadMovie();
},
到此为止 JS 文件写好了
我们现在要让在屏幕中显示
献上代码
<block wx:for="{{movies}}" wx:for-item="i">
// i 是每一部电影
<view class="picture">
<image src="{{i.images.medium}}" mode="aspectFill"/>
//这是电影的宣传图
</view>
<view class="info">
<view class="information">
<text >片名: {{i.title}}\n\n</text>
<view wx:for="{{i.casts}}" wx:for-item="j" >
<view >主演:{{j.name}}</view>
</view>
<view wx:for="{{i.directors}}" wx:for-item="k">
<text >\n导演:{{k.name}}</text>
</view>
<text >\n{{i.mainland_pubdate}}(中国大陆)</text>
</view>
</view>
</block>