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

你想獲取什麼數據可以自己查看它的變量名稱在開發者的工作界面

在這裏插入圖片描述

到此爲止我們的代碼就寫完了

希望可以幫到大家

附上我寫的成果

在這裏插入圖片描述

由於最近喜歡成果小姐姐,輪播圖放了她

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章