上一節實現了循環列表數據渲染到視圖，並給列表每一項添加了路由導航到新頁面查看更多細節，但是目前我們的數據都是虛擬的，現在我們就開始利用微信的request請求來接收豆瓣電影接口提供的數據。
API: wx.request(OBJECT)
參數有7個，這里主要講一下幾個重要的：
- url : 請求的地址
- data: 攜帶的數據
- method : 請求方式，默認為get
- success: 請求成功的回調函數
了解了網路請求的方法后，我們就不需要我們原來模擬的那些數據了，把所有的假數據統統干掉，留一個空的數據用來放數據即可。
data:{
moivelist:[],
loading:false
}
現在頁面進來的時候只展示了一個標題，因為數據為空了循環不出來了，現在需要我們在頁面進來的時候發送一個請求來接受數據。
豆瓣提供的API：[Title]https://developers.douban.com/wiki/?title=movie_v2#search
具體參數和接口請自行查閱，使用方法：https://api.douban.com + 對應的接口 + 參數(如果需要的話)
例子：https://api.douban.com/v2/movie/top250
我們以請求 排行250 這個接口為例：
onLoad: function() {
var url=https://api.douban.com/v2/movie/top250;
var that = this;//確保回調函數this的指向正確,后面會以es6的箭頭函數代替
wx.request({
url：url, //KEY和KEY值相同可簡寫為url
data: {}, //不要求數據
header: { 'Content-Type': 'application/json' },
//成功時的回調，res為返回值，需要儲存到我們的data數據里面
success: function(res) {
that.setData({
moivelist: res.data.subjects,
loading: true
})
}
})
}
寫完后，頁面進來的時候就會發送請求，並將數據保存到moiveList,並通過循環把數據展示出來，但是如果網絡差的話，會有一段真空期是沒有數據的，我們需要給用戶一個提示。
給頁面添加一個loading
<loading hidden="{{loading}}">
加載中....
</loading>
我們讓這個loading一開始就是顯示的，當數據加載成功后，才讓他消失。我們通過將hidden綁定到{{loading}}上，更改{{loading}}的布爾值來實現這個效果。一開始{{loading}}的值是false的，也就是不隱藏；success后將他設置為true，從而實現這個效果。
這樣我們這個頁面就做好了，另一個頁面同理，改變一下接口就行了，我們主要看一下detail這個文件。
我們現在可以實現網絡請求了，在之前我們detail的數據都是外面從列表傳過來的，我們是這么寫的。
<navigator url="../detail/detail?imgsrc={{item.imgsrc}}&title={{item.title}}&author={{item.author}}&introduce={{item.introduce}}&rank={{item.rank}}">
我靠這么長一段代碼，真的需要嗎？我們現在就可以簡寫了，我們只需要傳一個參數就可以了。
把template模板里面wxml里面上述代碼改成下面的
<navigator url="../detail/detail?id={{item.id}}">
我們只需要一個這個電影的ID就行了，我們可以根據這個ID自己請求數據
//在detail.js的Onload函數中獲取到頁面傳過來的ID
onLoad: function(options) {
var that = this;
var address = 'https://api.douban.com/v2/movie/subject/';
wx.request({
url: address + options.id,
data: {},
header: { 'Content-Type': 'application/json' },
success: function(res) {
that.setData({
item: res.data,
loading: true
})
}
})
}
這樣就完成了，現在我們在tabBar新增一個搜索頁面。記住新頁面都要添加到app.json中，這里就不再闡述了，頁面大概這個樣子
<import src="../temple/temple.wxml"></import>
<loading hidden="{{loading}}">
加載中....
</loading>
<view class="searchWrap">
<view class="inputWrap">
<icon type="search" size="20"/>
<input placeholder="請輸入搜索內容" value="{{content}}" type="text" placeholder-style="custom-placeholder-style" placeholder-class="custom-placeholder-class" bindinput="inputing" bindblur="quick"/>
</view>
<view class="cancel" bindtap="searching">{{cancel}}</view>
</view>
<scroll-view class="main" scroll-y="true" bindscrolltoupper="" bindscrolltolower="" bindscroll="" scroll-into-view="" scroll-top="">
<block wx:for="{{moivelist}}">
<template is="try" data="{{item}}"></template>
</block>
</scroll-view>
下面的列表跟前面一樣，就多個了Input和按鈕而已，同樣的wxss樣式我們就不管了，只看js。
主要代碼如下：
data: {
moivelist: [],
loading: true,
cancel: "取消",
search: ""
}
,
inputing: function(event) {
if (event.detail.value) {
this.setData({
cancel: "搜索"
})
} else {
this.setData({
cancel: "取消"
})
}
},
//失去焦點事件
quick: function(event) {
if (!event.detail.value) {
this.setData({
cancel: "取消"
})
} else {
this.setData({
search: event.detail.value
})
}
},
//點擊搜索事件
searching: function() {
if (this.data.cancel === "取消") {
wx.hideKeyboard()
} else {
this.setData({
loading: false
})
wx.request({
url: url + this.data.search,
data: {},
header: { 'Content-Type': 'application/json' },
success: function(res) {
that.setData({
moivelist: res.data.subjects,
loading: true
})
}
})
}
}
看起來寫了很多，其實就2件事：
* 判斷Input的值，如果為空，則讓按鈕的值為“取消”；不為空則為“搜索”。
* 根據按鈕的值綁定點擊事件，為取消則讓鍵盤下去(手機才行）為“搜索”則發送網絡請求，並將接收的數據保存以便循環展示出來。
到此，幾個文件就都寫好了，現在來對代碼優化一下。
1. wxml：我們已經創建了一個通用的模板了，好像沒得優化了。
2. css : 可以發現我們幾個列表都用了一個模板，因此對應的CSS代碼也是一樣的，我們可以把這部分CSS代碼放到app.wxss公共樣式里面，其他頁面對應的WXSS那部分都可以刪除了。
3. js:wx.request時用到了基本相同的東西，可以放到一個單獨的js里面。
創建一個util文件夾，在里面創建一個util.js文件，用來放我們的方法。
function getData(address,datas,cb){
wx.request({
url: address,
data:datas,
header: { 'Content-Type': 'application/json' },
success: cb
})
}
module.exports = {
getData: getData
}
我們定義了一個方法，並通過module.exports將他導出，其他頁面需要使用方法時，需要先導入
var util = require("../../utils/utils.js")
使用時：util.getData(參數1，參數2，參數3)
如：
onLoad: function() {
util.getData(url,{},(res)=>{
this.setData({
moivelist: res.data.subjects,
loading: true
})
})
}