小程序學習（7）——電影頁面設計製作及豆瓣API403解決

在之前學習做完了新聞文章的內容，這次開始學習電影的內容，而在電影的內容中，template模板是一個很重要的工具，所以讓我們盡情的使用這個工具來嵌套吧。

之前的文章頁面，導航欄的banner並沒有設置跳轉，感興趣的可以自己設置一下，方法和下邊的文章跳轉方式基本一樣。

1、tabBar組件

小程序的自定義菜單是內置好的tabBar，並且不支持對字體大小和點擊圖片大小的修改。

所以我們直接在app.json中引用該組件就可以，具體屬性看開發者文檔

如果你的遲遲顯示不出來，那麼請檢查你的路徑，我發現好幾次出現問題，並不是代碼有問題，而是路徑的問題。

2、對電影佈局的設計

針對多次引用的內容，肯定是需要一個單獨的模板，針對多層的使用，嵌套設計過程中的不同組件。

評分星級與分數
單個顯示內容的設計
整個行的一個模板設計

這些都是使用template的嵌套實現的，具體的C3代碼就不羅列了，可以在github下載看一下。
大體做完之後是下邊這個樣子

3、調用豆瓣API

現在情況是豆瓣已經停止了開放平臺，也就是我們是沒有辦法調用到數據的，百度之後看到的最全的是豆瓣APIV2測試，使用了這些API之後，提示的錯誤是403，也就是拒絕訪問，如圖

我們先假裝他可以用，先說API怎麼用，最後在想辦法解決403問題。

調用api肯定要知道API在小程序中怎麼引用。

 wx.request({
    url: url,
    method:'GET',
    header:{//設置請求的header
      "content-type":""
    },
    success:function(res){
        console.log(res);
    },
    fail:function(){
        console.log("shibai");
    },
  })

其他的類似之前寫的方法，仍然是在點擊事件onLoad中，在我們點擊了當前頁面的時候就向服務器端發送請求，獲取數據加載到當前頁面。

解決403問題

修改API的基地址，將https://api.douban.com修改成http://t.yushu.im，或者是其他的已經可以用的基地址。

4、對電影頁面進行數據綁定

在3裏邊我們應該是已經獲取到了正確的API返回，但是豆瓣返回的API一次是20條

是我們當前的頁面卻只是需要三條數據，所以我們修改一下API的限定條件，每次獲取三條數據。

我們在獲取api成功的情況下，返回我們需要的數據，因爲豆瓣返回的數據太雜，所以分類挑選出來我們需要的信息。

getMoviesData:function(url){
   var that=this;
  wx.request({
    url: url,
    method:'GET',
    header:{//設置請求的header
      "content-type":""
    },
    success:function(res){
      //成功，則獲取數據
      that.processDouban(res.data);
    },
    fail:function(){
        console.log("shibai");
    },
  })
 },

下邊是我們挑選數據的東西，這些數據是需要和返回的數據名一一對應的，所以看好返回數據

processDouban:function(movieDouban){
  //定義數組作爲數據處理完後的容器 
  var movies=[];
  //循環遍歷數據中的數組
  for(var idx in movieDouban.subjects)
  {
      var subject=movieDouban.subjects[idx];
      var title=subject.title;
      //判斷電影名字，進行長度截取。
      if(title.length>=6){
        title=title.substring(0,6)+"...";
      }
      var temp={
        title:title,//標題
        average:subject.rating.average,//評分
        coverageUrl:subject.images.large,//圖片主圖
        movieId:subject.id//電影ID
      }
      movies.push(temp)
  }
  this.setData({
    movies:movies
  })
 },

在使用數組temp賦值之後，我們將它push進我們的數組movies存放。

獲取數據成功後（具體成功沒有，看自己的調試器有沒有返回數據）

在獲取數據成功後，將數據綁定到各個template上，這個時候我們就不要從最下邊的template上開始，從離我們獲取到的數據最近的開始。

1、template做數據獲取是使用的data

第一步是在與.js同級的movies.wxml中對他賦值，將我們的數組傳過去

第二步是在第二層的movie-list-template.wxml,因爲這個是list列表的template，就是有多個嘛，所以只放我們現在使用的這一個，其他兩個不管。

用循環來分別輸出我們需要的內容。

第三步在movie-template.wxml中具體對於我們顯示的內容，進行數據綁定替換假數據

第四步替換最後一個template中的評分。

上裏邊我們已經可以正確連接並且使用豆瓣API了，但是我們是需要調用了三組數據，並不是一組，在三組同時調用的情況下，小程序只會識別到最後一組數據，所以我們的正在熱映，成了top250.

5、解決

我們使用全局變量做一個KEY，使用動態數據綁定賦值。

區分在獲取信息的地方是沒有辦法直接知道的，我們需要在獲取API的地方進行一個區分。也就是將全局變量當做KEY傳遞進去。

在調用多了參數的情況下，我們傳參也是對應需要多一個的，否則肯定是會報錯，這個好像不用說哈。

最後將原來我們單純的movies數據綁定修改，改成JS的動態數據綁定賦值

在這改完之後我們的修改的數據綁定就是結束了，其他的就是分別修改template中的內容