微信小程序请求接口并循环显示在页面

最新推荐文章于 2022-04-27 16:50:59 发布

weixin_33772645

最新推荐文章于 2022-04-27 16:50:59 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签：后端开发工具 json

原文链接：https://my.oschina.net/laobia/blog/1828514

本文介绍了一种在小程序中加载首页文章列表的方法，通过定义配置文件来设置接口请求，并展示了具体的实现代码，包括如何在页面加载时请求数据并显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

首先,这里我们在config里面定义请求的接口是什么,比如我这里需要调用首页的一个文章列表接口,我这里就直接定义好.域名在本地可以用本地调试好之后再改.

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

/**
 * Created by martinby on 2018/4/11.
 */
//加载config配置文件
var config=require('../../config')

Page({
    //定义页面的arc_list为空,这里给一个空的数组,下面初始化加载的时候,会去给这个arc_list赋值
    data:{
        arc_list:[],
    },
    //在加载的时候,请求接口,赋值数据
    onLoad:function(){
        var that = this
        //请求接口
        wx.request({
            url:config.service.indexListUrl,//配置文件中定义的首页接口
            data:{
                //这里是你请求需要发送的数据
                type: 'xx' ,
                key: '123456'
            },
            header:{
                'Content-Type':'application/json'
            },
            success:function(res){
                //请求成功后的回调
                if(res.data.code === 1){
                    //赋值
                    that.setData({
                        arc_list:res.data.list,
                    })

                }else{
                    console.log("获取失败");
                }
            }


        })


    }

})

我们请求后获取到这样的数据,所以赋值的代码片段那里是是res.data.值

//最后,我们页面进行循环一下

<view wx:for="{{arc_list}}" wx:for-item="item">
{{item.title}}
</view>

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

转载于:https://my.oschina.net/laobia/blog/1828514