Runlin微信小程序系列教程一：从零开始写一个demo《下》

上一节同时实现了循环列表数据图形至视图，并给列表每一项嵌入了路由导航系统至新页面查阅更多细节，但是目前我们的数据都就是交互式的，现在我们就已经开始利用微信的request命令去发送豆瓣电影USB提供更多的数据。

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

具体内容参数和USB恳请自行查询，采用方法：https://api.douban.com + 对应的USB + 参数(如果需要的话)

例子：https://api.douban.com/v2/movie/top250

我们以命令 名列250 这个USB为基准：

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，从而同时实现这个效果。

###这样我们这个页面就搞好了，另一个页面同理，发生改变一下USB就行了，我们主要看看一下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文件，用以摆我们的方法。

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

})

})

}

至此我们整个APP即使基本顺利完成了，时程如果除了补足则再继续嵌入。

代码参看demo4 ， 网址为：https://github.com/linrunzheng/wx-samll-demo