微信小程序——api调用(糗事百科例子)

最新推荐文章于 2024-07-04 22:45:47 发布

原创

最新推荐文章于 2024-07-04 22:45:47 发布 · 2.5k 阅读

本文通过分析糗事百科API，利用微信小程序的wx.request()方法请求数据，并展示如何使用this.setData()存储数据，以及实现到底翻页效果。详细讲解了从请求数据到在页面显示的全过程。

糗事百科api分析

糗事百科
http://m2.qiushibaike.com/article/list/{type}?type=refresh&page={page}&count={count}
参数type为类型，latest最新、text文本、image图片、video视频
参数page为页码；参数count为每页数量
示例：http://m2.qiushibaike.com/article/list/text?type=refresh&page=1&count=12

wx小程序请求api方法

微信小程序开发官方文档有给出wx.request()方法用于请求外部连接。官方文档链接为
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
注意：请将本地设置中的“不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书”勾上

尝试用wx.request()方法请求

onLoad: function (options) {
   
   
    var _this = this
    wx.request({
   
   
      url: 'http://m2.qiushibaike.com/article/list/text?type=refresh&page=1&count=12',
      success:function(res){
   
   
        console.log(res)
      }
    })
  },

打印回应数据：
在这里插入图片描述
我们从中找到文章的数据：

console.log(res.data.items)

结果为：
在这里插入图片描述

将我们要的数据用this.setData()方法存入我们定义的变量中以便页面获取使用

js代码：

页面在刚加载的时候就请求数据，所以将代码放在onLoad()方法中

Page({
   
   
  data: {
   
   
    res:{
   
   },
  },
  onLoad: function (options) {
   
   
    var _this = this
    wx.request({
   
   
      url: 'http://m2.qiushibaike.com/article/list/text?type=refresh&page=1&count=12',
      success:function(res)