专栏首页iOS Developer微信小程序开发教程-从零开始(3)

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

allluckly.cn.png

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

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

前俩章中我们学会了怎么搭建一个微信小程序的框架以及显示一个文章列表,这篇文章我将讲解列表的网络请求以及网络数据的对接。

首先找到我们的index.js文件,然后看看微信小程序的网络请求文档很轻松的就可以找到我们的示例代码:

wx.request({
  url: 'test.php',
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'Content-Type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
})

url为我们需要请求的接口

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

运行一下看看我们的请求是否有数据,结果如下图:

屏幕快照 2016-10-19 上午10.23.54.png

可以看出我们的数据请求已经是成功的,是不是非常的简单啊??下面我们再来看看怎么给相应的UI赋值吧。

首先在我们网络成功的地方加上以下代码:

success: function( res ) {
        console.log( res.data )
          that.setData( {
            
          })
      }

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

然后我们得到的数据为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
          })
      }
    })
  }

})

再把index.wxml中赋值的字段改成服务器返回相应的字段,运行结果如下图:

blog.allluckly.cn.gif

不知道什么原因,我这接口返回的图片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"} 
    ]
  }

随便弄几张图了,看看效果如何,?

Untitled.gif

本来还想做下详情页的,由于接口的详情是H5 ,貌似微信小程序不能直接加载H5,如有知道的朋友也可以给我留言告诉我,本人对于H5也是一窍不通?。

demo下载

本文为Bison原创,转载请注明出处,否则将追究法律责任

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • iOS开发之OCR光学识别储蓄卡以及信用卡

    Bison
  • Bison教你3分钟集成支付宝好友分享

    Bison
  • 仿window阿里旺旺登陆界面,打印机吐纸动画效果---转自Bison的技术博客

    Bison
  • 快速对接payjx的个人支付接口

    近期在了解个人支付接口,希望能解决我在微信上支付的问题。找了很多平台对比再三,感觉PAYJX比较专业。同时支持支付宝和微信,本文重点讲一下微信收银台模式的对接。...

    用户4621363
  • LightGBM大战XGBoost,谁将夺得桂冠?

    如果你是一个机器学习社区的活跃成员,你一定知道 **提升机器**(Boosting Machine)以及它们的能力。提升机器从AdaBoost发展到目前最流行的...

    机器学习算法工程师
  • 统计信息查询视图|全方位认识 sys 系统库

    在上一篇《会话和锁信息查询视图|全方位认识 sys 系统库》中,我们介绍了如何使用 sys 系统库总的视图来查询会话状态信息以及锁等待信息,本期的内容先给大家介...

    沃趣科技
  • LightGBM大战XGBoost,谁将夺得桂冠?

    如果你是一个机器学习社区的活跃成员,你一定知道 **提升机器**(Boosting Machine)以及它们的能力。提升机器从AdaBoost发展到目前最流行的...

    机器学习算法工程师
  • 数据挖掘案例:基于 ReliefF和K-means算法的应用

    .NET数据挖掘与机器学习 原文:http://www.cnblogs.com/asxinyu/archive/2013/08/29/3289682.html ...

    机器学习AI算法工程
  • 如何做特征选择

    1.数据挖掘与聚类分析概述 数据挖掘一般由以下几个步骤: (l)分析问题:源数据数据库必须经过评估确认其是否符合数据挖掘标准。以决定预期结果,也就选择了这项工作...

    机器学习AI算法工程
  • 特征选择算法实战

    数据挖掘方法的提出,让人们有能力最终认识数据的真正价值,即蕴藏在数据中的信息和知识。数据挖掘 (DataMiriing),指的是从大型数据库或数据仓库中提取人...

    机器学习AI算法工程

扫码关注云+社区

领取腾讯云代金券