豆瓣电影 (小程序教程3)

上一节实现了循环列表数据渲染到视图,并给列表每一项添加了路由导航到新页面查看更多细节,但是目前我们的数据都是虚拟的,现在我们就开始利用微信的request请求来接收豆瓣电影接口提供的数据。

API: wx.request(OBJECT)

参数有7个,这里主要讲一下几个重要的:

  1. url : 请求的地址
  2. data: 携带的数据
  3. method : 请求方式,默认为get
  4. success: 请求成功的回调函数

了解了网路请求的方法后,我们就不需要我们原来模拟的那些数据了,把所有的假数据统统干掉,留一个空的数据用来放数据即可。

data:{moivelist:[],loading:false}

现在页面进来的时候只展示了一个标题,因为数据为空了循环不出来了,现在需要我们在页面进来的时候发送一个请求来接受数据。

我们以请求 排行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}}的值是false的,也就是不隐藏;success后将他设置为true,从而实现这个效果。
###这样我们这个页面就做好了,另一个页面同理,改变一下接口就行了,我们主要看一下detail这个文件。
###我们现在可以实现网络请求了,在之前我们detail的数据都是外面从列表传过来的,我们是这么写的。


 

我靠这么长一段代码,真的需要吗?我们现在就可以简写了,我们只需要传一个参数就可以了。

把template模板里面wxml里面上述代码改成下面的


 

我们只需要一个这个电影的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中,这里就不再阐述了,页面大概这个样子

    加载中....               {{cancel}}            

下面的列表跟前面一样,就多个了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文件,用来放我们的方法。

functiongetData(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})
        })
    }

到此我们整个APP就算基本完成了,后续如果还有补充则再继续添加。


本文转载自:http://www.cnblogs.com/zhengrunlin/p/5965183.html