全棧工程師之路-中級篇之小程序開發-第二章第四節小程序http請求與請求本地json文件

上一節課，咱們已經基本完成了，首頁的界面編寫。

邏輯暫時不理會。

可是咱們用於展現頁面綁定的是咱們本地的假數據。

接下來咱們就來獲取真正的數據來展現頁面。

請跳過劃線部分。。。。。

綁定假數據編寫頁面算是前段最先作的一件事情吧。

特別是在先後端同步開發，聯合測試的時候。

服務端會先輸出接口文檔，而後先後端根據接口文檔同步開發，最後聯合測試。

這就須要前段本地編寫大量的假數據。

若是咱們每一個頁面的假數據的單獨編寫的話，後續和服務端聯調，咱們就須要更改大量的文件。

且修改完連接到服務器，而後又加了一個需求或者服務器掛了，這時候你要本地調試，就會變得很麻煩，你要把你修改的地方再改回來。

這樣的操做繁瑣並且容易出錯。

這時候咱們就能夠思考一下，是否是有什麼辦法，構建一個本地的假數據服務。

這裏只說一個我最經常使用的吧，使用http請求本地的json文件，來獲取數據。

本地的json文件，根據接口文檔建立一樣的層級目錄，聯調的時候只要在請求地址的最前端加入服務器地址就能夠了。

有兩個缺點：

1、這樣的請求方式，不支持攜帶參數的請求，就是無論你寫的是什麼條件，最終得到的都是本地的json文件，原樣輸出。

2、訪問本地的文件須要些文件後綴名，如data/data.json.有些服務器請求地址是data/data。後續刪除也是一個麻煩的問題。

根據上面的思路，咱們要作幾件事情。

一、獲取接口文檔

二、統一管理服務器地址

三、建立本地假數據文件

四、編寫http請求本地json文件

五、修改服務器地址訪問真正的服務器

六、調試修改。

wx.request不支持請求本地json（寫了半天發現微信不支持，這才叫瞎比比），這部分就不講了，直接講真實數據了。

軟件開發基本上就是這麼一個流程，發現問題，概括問題，提出解決方案，編寫程序，最後測試驗證方案准確。

一、首先我在很早的時候就說過了，咱們此次使用豆瓣電影的公開API文檔https://developers.douban.com/wiki/?title=api_v2

真是的請求地址是如https://api.douban.com/v2/movie/in_theaters?count=3（直接瀏覽器訪問就能請求到數據哦！）

二、咱們在util.js文件中，增長服務器的統一地址變量。

其實更好的作法是，編寫一個url處理方法。這樣若是後續須要統一的追加參數，或者其餘的統一操做，能夠直接在這裏修改。

三、編寫http請求。咱們先請求正在上映。

在小程序中咱們使用wx.request發送http請求。

咱們在index.js中編寫

url：請求地址，這裏咱們調用factory方法處理了

method：請求方式

header：有時候服務端要求帶請求頭

data：請求參數

success：成功回調

fail：失敗回調

這裏要注意的是要在頭部引用util文件var util = require('../../utils/util.js');

這裏咱們在成功和失敗的時候都打印了日誌，因此運行程序打開控制檯。

這個問題是微信爲了數據安全，要在後臺配置合法域名。後臺配置在「設置」-「開發設置」中填寫request合法域名。

因爲咱們沒有本身的服務器，又只是在開發環境測試，因此咱們可使用如下方法訪問非合法域名。

在開發工具左側「項目」裏面，勾選「開發環境不校驗請求域名、TLS版本以及HTTPS證書」

刷新項目，仍是查看控制檯

這裏咱們打印了從豆瓣獲取的數據，控制檯也明確聲明瞭工具未驗證。

四、回調函數中綁定數據

咱們將服務器請求的數據展開，標記咱們須要的數據，咱們會發現有一些咱們不須要的數據，

因爲咱們調用的是公共的API因此會有不少數據提供給其餘用戶的其餘需求，

若是咱們調用私有的API的時候，這種狀況比較少，可是也不排斥服務器懶直接對一個大對象給你的。

你跟他說流量啥的，都說服不了他的「方便」。

因此咱們這裏寫一個方法，把咱們須要的數據取出來。

還有一點是由於咱們最開始寫這個頁面的時候，是沒有藉口文檔的，因此全部的變量名都是咱們本身定義的。

可是拿到藉口文檔以後，建議根據接口文檔，把變量名都改過來，對於後續的維護和調試有很大的好處。

修改index.wxml

修改movielist模板

修改moviecard模板裏綁定的變量名

運行程序

咱們發現，中間這個電影的名字太長了，咱們界面上不須要這麼長，

因此咱們在moviecard模板的樣式文件裏面加入強制不換行，超出省列號顯示的屬性。

（截圖的時候少了一個width:200rpx;）

有些接口須要許可，因此咱們先挑選標誌，不須要許可的接口

Required Scope

movie_premium_r

一樣的方法，咱們編寫獲取即將上映

即將上映

Resources URI

/v2/movie/coming_soon

和

Top250

Resources URI

/v2/movie/top250

經過觀察咱們發現這幾個接口數據格式相同。

因此咱們統一修改一下請求方法。

在index中使用

運行效果

到此咱們的數據基本就綁定正確了。

可是如上圖中標記的還有好幾個效果不是很理想。

這裏咱們在starts模板裏面增長wx:if當分數爲0是顯示暫無評分

而後請求的時候傳遞自定義欄目標題。

修改一點點細節。不改也無所謂。這節課主要的內容是http請求。

細心的朋友會在控制檯看到這樣一條警告。這是由於咱們屢次調用setData函數。

那麼預計下一節課咱們就講解怎麼解決這個問題。

源文件 百度雲 連接：http://pan.baidu.com/s/1jIh3fL0 密碼：e84z
這節課的內容就到這裏結束了。
感謝您的閱讀。
我是莽夫，但願你開心。
若是你以爲本文對你有幫助，請掃描文末二維碼，支持博主原創。
但願你們關注個人我的公衆號ionic_