微信小程序wx.request请求服务器json数据并渲染到页面

您所在的位置:网站首页 微信统计数据小程序怎么弄 微信小程序wx.request请求服务器json数据并渲染到页面

微信小程序wx.request请求服务器json数据并渲染到页面

2024-06-13 13:15| 来源: 网络整理| 查看: 265

微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更新,而小程序数据主要是json数据格式,所以我们可以利用php操作数据库,把数据以json格式数据输出即可。

现在给大家讲一下微信小程序的wx.request请求服务器获取数据的用法。

官方文档给出了示例代码,但是我这边自己进行了简单的处理:

index.js

const app = getApp() Page({ data: {}, onLoad: function () { // 避免this指向问题 var that = this // 发起请求     wx.request({       url: 'http://demo.likeyunba.com/testData/20230225/data.json', // 这里要替换你的域名的       headers: {         'Content-Type': 'application/json'       },       success: function (res) { // 将获取到的JSON数据存入list数组中         that.setData({           dataList: res.data,         }) // 在控制台打印 console.log(res.data)       }     }) } })

注意,上面的 http://demo.likeyunba.com/testData/20230225/data.json 就是数据源,替换为你服务器的API接口,我这里用test.json来做演示,返回是JSON格式的数据。

data.json

[ { "id":"100", "title":"中国载人航天工程三十年成就展", "pv":"490.1万" }, { "id":"101", "title":"上海80后夫妻攒300万决定退休", "pv":"488.0万" }, { "id":"102", "title":"医保改革引关注 官方回应民众顾虑", "pv":"446.9万" }, { "id":"103", "title":"餐厅接网吧10个订单收到9个差评", "pv":"406.0万" }, { "id":"104", "title":"三亚买3888元海鲜被提醒多花1700", "pv":"340.1万" }, { "id":"105", "title":"警方回应女子高铁站殴打威胁女童", "pv":"264.7万" } ]

index.wxml

wx:for这个是小程序提供的一个指令,相当于遍历JSON数组的每一项。上面test.json有很多个JSON对象,遍历每一项就可以渲染出每一项的数据。

wx:key是给每一项添加一个标识,相当于每一项都拥有一个身份证的意思,也是唯一的,这样做有助于渲染效率。

item是相当于JSON数组的每一项,通过wx:for遍历出来的每一个JSON对象,然后读取每一个JSON对象的值。例如下面这个:

如果要单独读取里面的值,就是item.id,item.title,item.pv

{{index+1}} 指的是索引值+1,索引值是从0开始算的,即里面的每一项的值,一共有6项,从上到下的索引值是0、1、2、3、4、5,但是我为了每一项有个编号,那就在索引值的基础上+1,就可以实现每一项的编号。

{ "id":"100", "title":"中国载人航天工程三十年成就展", "pv":"490.1万" } 小程序渲染数据示例


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3