微信小程序之调用api

如何将接口获取到的数据展示到微信小程序上

第1步

首先你要找到一个api开放接口,无论是免费的还是收费的,我这里推荐一个免费的apihttps://blog.csdn.net/c__chao/article/details/78573737提供了很多接口

第2步

配置request合法域名,在微信公众平台找到开发设置-服务器域名-服务器配置
这是我的一个api

配置好之后就可以去开发工具使用了

先看一下官方的示例代码

wx.request({
  url: '******', //这里填写你的接口路径
  header: { //这里写你借口返回的数据是什么类型,这里就体现了微信小程序的强大,直接给你解析数据,再也不用去寻找各种方法去解析json,xml等数据了
      'Content-Type': 'application/json'
  },
  data: {//这里写你要请求的参数
     x: '' ,
     y: ''
  },

  success: function(res) {
  //这里就是请求成功后,进行一些函数操作
    console.log(res.data)
  }
})
第3步

下面以天气api为例,先来看一下api的结构


需要用到的是forecast里面的数据,那么怎么取到其中的数据呢,就需要一层一层的进入api
console.log(res.data.data.forecast)这样已经进入forecast数据里面

里面是一个多维数组,假设我们要取到第一个数组的数据
image.png
这样就取到了第一个数据,数据已经取到了那么怎么在页面输出呢

第4步

js文件

  onLoad: function () {
    var that = this//不要漏了这句,很重要
    wx.request({
      url: 'https://www.apiopen.top/weatherApi?city=成都',
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
         that.setData({
           date: res.data.data.forecast[0].date,
                  fengxiang: res.data.data.forecast[0].fengxiang,
                  type: res.data.data.forecast[0].type
           //res代表success函数的事件对,data是固定的,fengxiang是是上面json数据中fengxiang
         })
      }
    })
  }

wxml文件

{{date}}
{{fengxiang}}
{{type}}

简单的在页面输出


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 你来之前 我独自承受 有你之后 我任性等候 听过的辱骂 忍受的委屈 因为倔强 都傲娇的存在 烫伤的手 风凉的肩 因...
    文艺范儿风阅读 208评论 0 1
  • 尽管时间无穷无尽,却能在有限的时间里,提供无限的证明:时间可以证明自然变化的多少,...
    冰夫阅读 238评论 0 0
  • 儿行千里母担忧,今天看到老师发来的视频,终于放心了,就在昨天我还胡思乱想着难以入眠,凌晨四点半才休息了一会,看到孩...
    彧彧彧彧阅读 305评论 0 1
  • 引子在年轻的时候,如果你爱上了一个人,请你,请你一定要温柔地对待他。不管你们相爱的时间有多长或多短,若你们能始终温...
    庄生的蝶梦阅读 1,161评论 5 11