欢迎光临,了解微信小程序开发,就上易用通!

微信小程序开发教程- 从零开始(3)

发布:2018-01-25 15:21浏览: 来源:网络 作者:tianshu

前俩章中我们学会了怎么搭建一个微信小程序的框架以及显示一个文章列表,这篇文章我将讲解列表的网络请求以及网络数据的对接。
首先找到我们的index.js文件,然后看看微信小程序的网络请求文档很轻松的就可以找到我们的示例代码:
  1. wx.request({
  2.   url: 'test.php',
  3.   data: {
  4.      x: '' ,
  5.      y: ''
  6.   },
  7.   header: {
  8.       'Content-Type': 'application/json'
  9.   },
  10.   success: function(res) {
  11.     console.log(res.data)
  12.   }
  13. })
复制代码
url为我们需要请求的接口
data为我们的请求参数
header为设置请求的 header , header 中不能设置 Referer
success收到开发者服务成功返回的回调函数,res = {data: '开发者服务器返回的内容'}
console.log( res.data )为打印请求下来的数据
默认为get请求,在此我们就用默认的请求方式,具体的代码如下:
  1. onLoad: function () {
  2.     console.log('onLoad')
  3.     var that = this
  4.     wx.request( {
  5.       url: 'https://sep9.cn/qt5wix',
  6.       data: {},
  7.       header: {
  8.         'Content-Type': 'application/json'
  9.       },
  10.       success: function( res ) {
  11.         console.log( res.data )
  12.       }
  13.     })
  14.   }
复制代码
运行一下看看我们的请求是否有数据,结果如下图:
微信小程序开发教程- 从零开始(3)(图1)
可以看出我们的数据请求已经是成功的,是不是非常的简单啊?
然后我们得到的数据为res.data通过打印我们可以看出我们的数据结构和原来写死的数据结构是一样的,但是里面的字段确不一样,因此,我们需要把请求下来的值赋值给我们原来的数据源,然后把原有的数据源的字段改成网络请求下来的字段最终的代码如下:
  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5.   data: {
  6.     newList:[  
  7.     ]
  8.   },
  9.   //事件处理函数
  10.   bindViewTap: function() {
  11.     wx.navigateTo({
  12.       url: '../logs/logs'
  13.     })
  14.   },
  15.   onLoad: function () {
  16.     console.log('onLoad')
  17.     var that = this
  18.     wx.request( {
  19.       url: 'https://sep9.cn/qt5wix',
  20.       data: {},
  21.       header: {
  22.         'Content-Type': 'application/json'
  23.       },
  24.       success: function( res ) {
  25.         console.log( res.data )
  26.           that.setData( {
  27.             newList: res.data
  28.           })
  29.       }
  30.     })
  31.   }
  32.  
  33. })
复制代码

再把index.wxml中赋值的字段改成服务器返回相应的字段,运行结果如下图:
微信小程序开发教程- 从零开始(3)(图2)

不知道什么原因,我这接口返回的图片url在微信小程序中无法显示,为了让效果更加的接近我们的效果图,在本地给我们的数据源加了些网络上的图片,代码如下
  1. data: {
  2.     newList:[{fistImg:"https://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,
  3.              {fistImg:"https://a.hiphotos.baidu.com/image/pic/item/c8ea15ce36d3d539be4d77b83f87e950352ab05c.jpg"} , 
  4.              {fistImg:"https://h.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a2922e765c99b25bc315c607c8d.jpg"} ,
  5.              {fistImg:"https://c.hiphotos.baidu.com/image/pic/item/3b292df5e0fe9925ae23d95736a85edf8db1718d.jpg"} ,
  6.              {fistImg:"https://g.hiphotos.baidu.com/image/pic/item/faedab64034f78f099a529f47b310a55b3191c0e.jpg"} ,
  7.              {fistImg:"https://g.hiphotos.baidu.com/image/pic/item/bd315c6034a85edf9ba34e244b540923dd54758d.jpg"} ,
  8.              {fistImg:"https://f.hiphotos.baidu.com/image/pic/item/00e93901213fb80e0ee553d034d12f2eb9389484.jpg"} ,
  9.              {fistImg:"https://img1.imgtn.bdimg.com/it/u=2955244448,132069077&fm=21&gp=0.jpg"} ,
  10.              {fistImg:"https://image.tianjimedia.com/uploadImages/2014/127/32/VP974HZ0AXL2.jpg"} ,
  11.              {fistImg:"https://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,
  12.              {fistImg:"https://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,
  13.              {fistImg:"https://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,
  14.              {fistImg:"https://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,
  15.              {fistImg:"https://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,
  16.              {fistImg:"https://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,
  17.              {fistImg:"https://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} 
  18.     ]
  19.   }
复制代码

随便弄几张图了,看看效果如何
微信小程序开发教程- 从零开始(3)(图3)





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。