上一節課，我們已經基本完成了，首頁的界面編寫。
邏輯暫時不理會。
但是我們用於展示頁面綁定的是我們本地的假數據。
接下來我們就來獲取真正的數據來展示頁面。
請跳過劃線部分。。。。。
綁定假數據編寫頁面算是前段最早做的一件事情吧。
特別是在前後端同步開發，聯合測試的時候。
服務端會先輸出接口文檔，然後前後端根據接口文檔同步開發，最後聯合測試。
這就需要前段本地編寫大量的假數據。
如果我們每個頁面的假數據的單獨編寫的話，後續和服務端聯調，我們就需要更改大量的文件。
且修改完鏈接到服務器，然後又加了一個需求或者服務器掛了，這時候你要本地調試，就會變得很麻煩，你要把你修改的地方再改回來。
這樣的操作繁瑣而且容易出錯。
這時候我們就可以思考一下，是不是有什麼辦法，構建一個本地的假數據服務。
這裏只說一個我最常用的吧，使用http請求本地的json文件，來獲取數據。
本地的json文件，根據接口文檔創建同樣的層級目錄，聯調的時候只要在請求地址的最前端加入服務器地址就可以了。
有兩個缺點：
一、這樣的請求方式，不支持攜帶參數的請求，就是不管你寫的是什麼條件，最終獲得的都是本地的json文件，原樣輸出。
二、訪問本地的文件需要些文件後綴名，如data/data.json.有些服務器請求地址是data/data。後續刪除也是一個麻煩的問題。
根據上面的思路，我們要做幾件事情。
1、獲取接口文檔
2、統一管理服務器地址
3、創建本地假數據文件
4、編寫http請求本地json文件
5、修改服務器地址訪問真正的服務器
6、調試修改。
wx.request不支持請求本地json（寫了半天發現微信不支持，這才叫瞎比比），這部分就不講了，直接講真實數據了。
軟件開發基本上就是這麼一個流程，發現問題，歸納問題，提出解決方案，編寫程序，最後測試驗證方案准確。
1、首先我在很早的時候就說過了，我們這次使用豆瓣電影的公開API文檔https://developers.douban.com/wiki/?title=api_v2
真是的請求地址是如https://api.douban.com/v2/movie/in_theaters?count=3（直接瀏覽器訪問就能請求到數據哦！）
2、我們在util.js文件中，增加服務器的統一地址變量。
其實更好的做法是，編寫一個url處理方法。這樣如果後續需要統一的追加參數，或者其他的統一操作，可以直接在這裏修改。
3、編寫http請求。我們先請求正在上映。
在小程序中我們使用wx.request發送http請求。
我們在index.js中編寫
url：請求地址，這裏我們調用factory方法處理了
method：請求方式
header：有時候服務端要求帶請求頭
data：請求參數
success：成功回調
fail：失敗回調
這裏要注意的是要在頭部引用util文件var util = require('../../utils/util.js');
這裏我們在成功和失敗的時候都打印了日誌，所以運行程序打開控制檯。
這個問題是微信爲了數據安全，要在後臺配置合法域名。後臺配置在“設置”-“開發設置”中填寫request合法域名。
由於我們沒有自己的服務器，又只是在開發環境測試，所以我們可以使用以下方法訪問非合法域名。
在開發工具左側“項目”裏面，勾選“開發環境不校驗請求域名、TLS版本以及HTTPS證書”
刷新項目，還是查看控制檯
這裏我們打印了從豆瓣獲取的數據，控制檯也明確聲明瞭工具未驗證。
4、回調函數中綁定數據
我們將服務器請求的數據展開，標記我們需要的數據，我們會發現有一些我們不需要的數據，
由於我們調用的是公共的API所以會有很多數據提供給其他用戶的其他需求，
如果我們調用私有的API的時候，這種情況比較少，但是也不排斥服務器懶直接對一個大對象給你的。
你跟他說流量啥的，都說服不了他的“方便”。
所以我們這裏寫一個方法，把我們需要的數據取出來。
還有一點是因爲我們最開始寫這個頁面的時候，是沒有藉口文檔的，所以所有的變量名都是我們自己定義的。
但是拿到藉口文檔之後，建議根據接口文檔，把變量名都改過來，對於後續的維護和調試有很大的好處。
修改index.wxml
修改movielist模板
修改moviecard模板裏綁定的變量名
運行程序
我們發現，中間這個電影的名字太長了，我們界面上不需要這麼長，
所以我們在moviecard模板的樣式文件裏面加入強制不換行，超出省列號顯示的屬性。
（截圖的時候少了一個width:200rpx;）
有些接口需要許可，所以我們先挑選標誌，不需要許可的接口
Required Scope
movie_premium_r同樣的方法，我們編寫獲取即將上映
即將上映
Resources URI
/v2/movie/coming_soonTop250
Resources URI
/v2/movie/top250所以我們統一修改一下請求方法。
在index中使用
運行效果
到此我們的數據基本就綁定正確了。
但是如上圖中標記的還有好幾個效果不是很理想。
這裏我們在starts模板裏面增加wx:if當分數爲0是顯示暫無評分
然後請求的時候傳遞自定義欄目標題。
修改一點點細節。不改也無所謂。這節課主要的內容是http請求。
細心的朋友會在控制檯看到這樣一條警告。這是因爲我們多次調用setData函數。
那麼預計下一節課我們就講解怎麼解決這個問題。
源文件 百度雲 鏈接：http://pan.baidu.com/s/1jIh3fL0 密碼：e84z
這節課的內容就到這裏結束了。
感謝您的閱讀。
我是莽夫，希望你開心。
如果你覺得本文對你有幫助，請掃描文末二維碼，支持博主原創。
希望大家關注我的個人公衆號ionic_
