IOS开发者试水：微信小程序开发教程-从零开始（3）

这篇文章我将传授列表的网络命令以及网络数据的交会。

首先找出我们的index.js文件，然后看一看微信小程序的网络命令文档很随心所欲的就可以找出我们的示例代码：

wx.request({

url: 'test.php',

data: {

x: '' ,

y: ''

},

header: {

'Content-Type': 'application/json'

},

success: function(res) {

console.log(res.data)

}

})

url为我们须要命令的USB

data为我们的命令参数

header为设置命令的 header , header 中无法设置 Referer

success接到开发者服务顺利回到的反弹函数，res = {data: ‘开发者服务器返回的内容’}

console.log( res.data )为列印命令下来的数据

预设为get命令，在此我们就用预设的命令方式，具体内容的代码如下：

onLoad: function () {

console.log('onLoad')

var that = this

wx.request( {

url: 'http://sep9.cn/qt5wix',

data: {},

header: {

'Content-Type': 'application/json'

},

success: function( res ) {

console.log( res.data )

}

})

}

运转一下看一看我们的命令与否存有数据，结果如下图：

可以窥见我们的数据命令已经就是顺利的，是不是非常的直观啊？

下面我们再去看一看怎么给适当的UI赋值吧。

首先在我们网络顺利的地方加之以下代码: ``` success: function( res ) { console.log( res.data ) that.setData( {

})

} ```

that.setData( { })这个方法主要就是用以赋值的

然后我们获得的数据为res.data通过列印我们可以窥见我们的数据结构和原来inotify的数据结构就是一样的，但是里面的字段确不一样，因此，我们须要把命令下来的值赋值给我们原来的数据源，然后把旧有的数据源的字段换成网络命令下来的字段最终的代码如下： ``` //index.js //以获取应用领域实例 var app = getApp() Page({ data: { newList:[

] }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: ‘../logs/logs’ }) }, onLoad: function () { console.log(‘onLoad’) var that = this wx.request( { url: ‘http://sep9.cn/qt5wix’, data: {}, header: { ‘Content-Type’: ‘application/json’ }, success: function( res ) { console.log( res.data ) that.setData( { newList: res.data }) } }) }

}) ```

再把index.wxml中赋值的字段换成服务器返回适当的字段，运转结果如下图：

不晓得什么原因，我这USB回到的图片url在微信小程序中无法表明，为了使效果更加的吻合我们的效果图，在本地给我们的数据源提了些网络上的图片，代码如下：

data: {

newList:[{fistImg:"http://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,

{fistImg:"http://a.hiphotos.baidu.com/image/pic/item/c8ea15ce36d3d539be4d77b83f87e950352ab05c.jpg"} ,

{fistImg:"http://h.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a2922e765c99b25bc315c607c8d.jpg"} ,

{fistImg:"http://c.hiphotos.baidu.com/image/pic/item/3b292df5e0fe9925ae23d95736a85edf8db1718d.jpg"} ,

{fistImg:"http://g.hiphotos.baidu.com/image/pic/item/faedab64034f78f099a529f47b310a55b3191c0e.jpg"} ,

{fistImg:"http://g.hiphotos.baidu.com/image/pic/item/bd315c6034a85edf9ba34e244b540923dd54758d.jpg"} ,

{fistImg:"http://f.hiphotos.baidu.com/image/pic/item/00e93901213fb80e0ee553d034d12f2eb9389484.jpg"} ,

{fistImg:"http://img1.imgtn.bdimg.com/it/u=2955244448,132069077&fm=21&gp=0.jpg"} ,

{fistImg:"http://image.tianjimedia.com/uploadImages/2014/127/32/VP974HZ0AXL2.jpg"} ,

{fistImg:"http://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,

{fistImg:"http://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,

{fistImg:"http://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,

{fistImg:"http://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,

{fistImg:"http://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,

{fistImg:"http://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,

{fistImg:"http://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"}

]

}

随便搬几张图了，看一看效果如何，

本来还想要搞下详情页的，由于USB的详情请就是H5 ,而已微信小程序无法轻易读取H5，例如存有晓得的朋友也可以给我帖子说我，本人对于H5也就是一窍不通。

demo浏览