上一節(jié)實(shí)現(xiàn)了循環(huán)列表數(shù)據(jù)渲染到視圖，并給列表每一項(xiàng)添加了路由導(dǎo)航到新頁(yè)面查看更多細(xì)節(jié)，但是目前我們的數(shù)據(jù)都是虛擬的，現(xiàn)在我們就開始利用微信的request請(qǐng)求來接收豆瓣電影接口提供的數(shù)據(jù)。

API: wx.request(OBJECT)

參數(shù)有7個(gè)，這里主要講一下幾個(gè)重要的：

1. url : 請(qǐng)求的地址
2. data: 攜帶的數(shù)據(jù)
3. method : 請(qǐng)求方式，默認(rèn)為get
4. success: 請(qǐng)求成功的回調(diào)函數(shù)

了解了網(wǎng)路請(qǐng)求的方法后，我們就不需要我們?cè)瓉砟M的那些數(shù)據(jù)了，把所有的假數(shù)據(jù)統(tǒng)統(tǒng)干掉，留一個(gè)空的數(shù)據(jù)用來放數(shù)據(jù)即可。

onLoad: function() {

        var url=https://api.douban.com/v2/movie/top250;

        var that = this;//確?；卣{(diào)函數(shù)this的指向正確,后面會(huì)以es6的箭頭函數(shù)代替

        wx.request({

            url：url,  //KEY和KEY值相同可簡(jiǎn)寫為url

            data: {},  //不要求數(shù)據(jù)

            header: { 'Content-Type': 'application/json' },

            //成功時(shí)的回調(diào)，res為返回值，需要儲(chǔ)存到我們的data數(shù)據(jù)里面

            success: function(res) {

                that.setData({

                    moivelist: res.data.subjects,

                    loading: true

                })

              }

           })

        }

<loading hidden="{{loading}}">

    加載中....

</loading>

 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

                })

            }

        })

    }

<import src="../temple/temple.wxml"></import>

<loading hidden="{{loading}}">

    加載中....

</loading>

<view class="searchWrap">

    <view class="inputWrap">

        <icon type="search" size="20"/> 

        <input placeholder="請(qǐng)輸入搜索內(nèi)容"  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>  

data: {

        moivelist: [],

        loading: true,

        cancel: "取消",

        search: ""

    }

   ,

    

    inputing: function(event) {

        if (event.detail.value) {

            this.setData({

                cancel: "搜索"

            })

        } else {

            this.setData({

                cancel: "取消"

            })

        }

    },

    //失去焦點(diǎn)事件

    quick: function(event) {

        if (!event.detail.value) {

            this.setData({

                cancel: "取消"

            })

        } else {

            this.setData({

                search: event.detail.value

            })

        }

    },

    //點(diǎn)擊搜索事件

    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

                    })

                }

            })

        }

    }

function getData(address,datas,cb){

    wx.request({

        url: address,

        data:datas,

        header: { 'Content-Type': 'application/json' },

        success: cb

    })

}

module.exports = {

    getData: getData

}

onLoad: function() {

        util.getData(url,{},(res)=>{

          this.setData({

              moivelist: res.data.subjects,

              loading: true

          })

        })

    }