微信小程序調用豆瓣電影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>