.png
微信小程序开发教程-从头开始（1）
微信小程序开发教程-从头开始（2）
在前两章中，我们学习了如何构建微信小程序框架并显示文章列表。在本文中，我将解释列表的网络请求以及网络数据的连接。
首先找到我们的.js文件，然后查看微信小程序的Web请求文档。很容易找到我们的示例代码：
wx.request({ url: 'test.php', data: { x: '' , y: '' }, header: { 'Content-Type': 'application/json' }, success: function(res) { console.log(res.data) } })
url是我们需要请求的界面
数据是我们的请求参数
对于设置请求，不能在其中设置
接收开发者服务成功返回的回调函数，res = {data：“开发者服务器返回的内容”}
.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 ) } }) }
运行它以查看我们的请求是否包含数据，结果如下：
屏幕截图2016-10-19 1 0. 2 3. 5 4. png
：
可以看出我们的数据请求成功了小程序开发数据请求，这很简单吗？让我们看一下如何为相应的UI分配值。
首先在我们的网络成功的地方添加以下代码：
success: function( res ) { console.log( res.data ) that.setData( { }) }
that。（{}）这种方法主要用于赋值
那么我们得到的数据就是res.data。通过打印，我们可以看到我们的数据结构与原始的硬编码数据结构相同，但是里面的字段确实不同。因此，我们需要将请求值更改为我们的原始数据源分配值，然后将原始数据源的字段更改为网络请求的字段。最终代码如下：
//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 }) } }) } })
将.wxml中分配的字段更改为服务器返回的相应字段，操作结果如下：
.gif
我不知道为什么，我的界面返回的图片网址无法显示在微信小程序中。为了使效果更接近我们的渲染效果，我们在上向本地数据源添加了一些图片和代码。如下：
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"} ] }
随机获取一些图片，看看其工作原理，
.gif
我本来想做下一个详细页面。由于接口详细信息为H5，因此微信小程序似乎无法直接加载H5。如果您有任何朋友，可以给我留言，告诉我我对H5一无所知。
演示下载