美文网首页微信小程序开发微信小程序微信小程序
微信小程序调用接口并循环显示在页面

微信小程序调用接口并循环显示在页面

作者: Dove言和 | 来源:发表于2019-04-30 16:05 被阅读1次

    在开发微信小程序的过程中,有调用接口的情况,(如果是想找免费接口用来测试或者玩的,可以去免费开放接口API找免费的API接口)

    本篇文章 调用的接口是笑话大全  https://v.juhe.cn/joke/content/list.php

    下面是pages/index/index.js的代码 

        //请求接口

        wx.request({

          //这里是你用到的接口

          url: 'https://v.juhe.cn/joke/content/list.php',

          data: {

            //这里是你请求需要发送的数据

            key: '**************',//key值需要申请

            page: '2',

            pagesize: '3',

            sort: 'asc',

            time: '1418745237',

          },

          success: function (res) {

            //请求成功后的回调

            console.log(res.data.result.data)// 服务器回包信息

            if(res.statusCode == '200'){

              // 赋值

              obj.setData({

                result_list: res.data.result.data,

              })

            }else{

              console.log("获取失败");

            }

          }

        })

    接口返回的值

    最后 我们在页面进行简单循环一下

    <view wx:for="{{result_list}}" wx:key="navItems" wx:for-index="index" wx:for-item="item">

    {{index+1}}、{{item.content}}

    </view>

    简简单单循环一下,就得到下面效果的页面

    以上是直接请求接口,如何用get/post提交form数据 调用接口并循环显示在页面,下一篇文章或者直接点击链接访问~

    相关文章

      网友评论

        本文标题:微信小程序调用接口并循环显示在页面

        本文链接:https://www.haomeiwen.com/subject/uvyvnqtx.html