当前位置: 首页 > news >正文

【已验证-直接用】微信小程序wx.request请求服务器json数据并渲染到页面

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

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

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

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万"}
]

Json.wxml

<!--pages/Json/Json.wxml-->
<view class='container'><view class="header">小程序渲染数据示例</view><view class="card" wx:for="{{dataList}}" wx:key="dataList"><view class="title">{{index+1}} . {{item.title}}</view><view class="pv">{{item.pv}}</view></view></view><view class="author">BY TANKING</view>

Json.wxss

/* pages/Json/Json.wxss */
.container{width: 90%;margin:30px auto;
}.container .header{text-align: center;font-size: 20px;margin-bottom: 25px;
}.container .card{width: 100%;height: 45px;background: #eee;border-bottom: 1px solid #fff;
}.container .card .title{width: 80%;float: left;height: 45px;line-height: 45px;font-size: 15px;color: #666;text-indent: 15px;white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; /*超出部分显示...*/
}.container .card .pv{width: 20%;float: right;height: 45px;line-height: 45px;font-size: 15px;color: #666;
}.author{text-align: center;font-size: 13px;color: #ccc;
}

Json.js

// pages/Json/Json.js
Page({/*** 页面的初始数据*/data: {dataList:[]},/*** 生命周期函数--监听页面加载*/onLoad(options) {// 避免this指向问题
var that = this// 发起请求
wx.request({url: 'http://127.0.0.1:8081/apiwx/jason/data.json', // 这里要替换你的域名的headers: {'Content-Type': 'application/json'},success: function (res) {//console.log("获取到的用户信息成功: " + res.data);// 将获取到的JSON数据存入list数组中that.setData({dataList: res.data,})// 在控制台打印console.log(res.data)}
})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

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

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,就可以实现每一项的编号。
 

如果我们没有wx:key那么在控制台会提示一些警告信息,但是这个警告信息并不影响页面的渲染,基本可以忽略掉!

警告信息:Now you can provide attr "wx:key" for a "wx:for" to improve performance

wx:key用来对列表渲染的数据指定一个"主键”,以加快列表渲染的速度。以下是官方文档原话:如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。如果你一定想去掉这个警告,可以在wx:for的组件属性里增加一个 wx:key="unique",unique请替换成数据绑定列表里的任意一个字段的字段名,比如文章列表数据中的字段“postId”,即wx:key="postId"。不建议使用wx:key="*this"
 

渲染结果如下

相关文章:

【已验证-直接用】微信小程序wx.request请求服务器json数据并渲染到页面

微信小程序的数据总不能写死吧&#xff0c;肯定是要结合数据库来做数据更新&#xff0c;而小程序数据主要是json数据格式&#xff0c;所以我们可以利用php操作数据库&#xff0c;把数据以json格式数据输出即可。 现在给大家讲一下微信小程序的wx.request请求服务器获取数据的用…...

如何提高小红书笔记的互动率

相信有很多新手在运营小红书的时候&#xff0c;可能都会遇到过以下这样的情况&#xff1a; 笔记点赞、收藏数据明明还可以&#xff0c;但评论区却没有人留言&#xff1f;为何大家只给点赞、收藏&#xff0c;却不关注账号&#xff1f; 其实&#xff0c;这背后有很多运营技巧&a…...

RabbitMQ 系列教程

一、RabbitMQ 部署及配置详解(集群部署) 二、RabbitMQ 部署及配置详解 (单机) 三、RabbitMQ 详解及实例&#xff08;含错误信息处理&#xff09; 四、RabbitMq死信队列及其处理方案 五、RabbitMQ Java开发教程—官方原版 六、RabbitMQ Java开发教程&#xff08;二&#x…...

无感刷新token

无感刷新 无感刷新Token技术是一种用于实现持久登录体验的关键技术&#xff0c;它通过在用户登录后自动刷新Token&#xff0c;以延长用户的登录状态&#xff0c;避免频繁要求用户重新登录。 实现 使用access_token&#xff08;短效token&#xff09;和refresh_token&#xf…...

【Python大数据笔记_day06_Hive】

hive内外表操作 建表语法 create [external] table [if not exists] 表名(字段名 字段类型 , 字段名 字段类型 , ... ) [partitioned by (分区字段名 分区字段类型)] # 分区表固定格式 [clustered by (分桶字段名) into 桶个数 buckets] # 分桶表固定格式 注意: 可以排序[so…...

Netty--文件编程

3. 文件编程 3.1 FileChannel ⚠️ FileChannel 工作模式 FileChannel 只能工作在阻塞模式下 获取 不能直接打开 FileChannel&#xff0c;必须通过 FileInputStream、FileOutputStream 或者 RandomAccessFile 来获取 FileChannel&#xff0c;它们都有 getChannel 方法 通过…...

SVN 服务器建立

1.建立SVN库 svnadmin create cat svndir/conf/passwd 修改SVN用户密码 chenht 123456 2.建立目录权限 [aliases] # joe /CXZ/STDessert/LSnake City/OSnake Oil, Ltd./OUResearch Institute/CNJoe Average [groups] # harry_and_sally harry,sally # harry_sally_…...

iPhone或在2024开放第三方应用商店。

iPhone或开放第三方应用商店&#xff0c;可以说这是一个老生常谈的话题。对于像是iOS这样封闭的系统来说&#xff0c;此前传出苹果可能开放侧载消息的时候&#xff0c;又有谁能信&#xff0c;谁会信&#xff1f; 如果是按照苹果自身的意愿&#xff0c;这种事情自然是不可能发生…...

《C和指针》笔记36:动态内存分配

1. malloc和free C函数库提供了两个函数&#xff0c;malloc和free&#xff0c;分别用于执行动态内存分配和释放。这些函数维护一个可用内存池。当一个程序另外需要一些内存时&#xff0c;它就调用malloc函数&#xff0c;malloc从内存池中提取一块合适的内存&#xff0c;并向该…...

C/S架构学习之基于UDP的本地通信(服务器)

基于UDP的本地通信&#xff08;服务器&#xff09;&#xff1a;创建流程&#xff1a;一、创建数据报式套接字&#xff08;socket函数&#xff09;&#xff1a; int sock_fd socket(AF_UNIX,SOCK_DGRAM,0);if(-1 sock_fd){perror("socket error");exit(-1);}二、创建…...

excel如何加密(excel加密的三种方法)

Excel是一款广泛使用的办公软件&#xff0c;有时候我们需要对一些重要的Excel文件进行加密&#xff0c;以保证文件的安全性。下面将介绍3种常用的Excel加密方法。 方法一&#xff1a;通过路径文件-另存为-工具-常规选项-设置打开或修改权限密码&#xff08;密码只可以使数字、字…...

玩了个锤子游戏小程序搭建流程:探索深度与逻辑的结合

随着移动互联网的普及&#xff0c;小程序已经成为了越来越多用户的选择。在这个背景下&#xff0c;玩了个锤子游戏小程序应运而生&#xff0c;它为用户提供了一个全新的游戏体验。那么&#xff0c;如何搭建这样一个小程序呢&#xff1f;本文将为大家详细介绍玩了个锤子游戏小程…...

召回率计算及影响因素

召回率是指在所有正样本中&#xff0c;被成功预测为正样本的样本数占比。在机器学习领域&#xff0c;召回率是评估模型预测性能的重要指标之一。在本文中&#xff0c;我们将从多个方面深入探讨召回率的概念和应用。 阈值越高&#xff0c;精准率越高&#xff0c;召回率越低&…...

在Qt中怎么由函数定义自动创建函数实现模板

2023年11月12日&#xff0c;周日凌晨...

【算法】算法题-20231112

算法题 一、459. 重复的子字符串二、414. 第三大的数三、520. 检测大写字母四、680. 验证回文串 II五、283. 移动零 一、459. 重复的子字符串 简单 给定一个非空的字符串 s &#xff0c;检查是否可以通过由它的一个子串重复多次构成。 示例 1: 输入: s “abab” 输出: true…...

目标检测YOLO实战应用案例100讲-基于多目标追踪的交通场景异常检测(续)

目录 3.5特征融合网络改进:小目标检测层 3.5.1小目标检测层 3.6实验结果与讨论...

最新支付宝转卡码生成之转账源代码(隐藏部分卡号)

一、需要准备好自己的卡号、名称、以及对应的姓名 二、然后将自己的信息填入下面的代码中 三、然后将拼接好的代码&#xff0c;利用转码技术生产对应的二维码 四、这样一个跳转银行卡二维码的转账码就做好了 效果演示&#xff1a;如下 支付宝扫码、跳转码、转卡码、隐藏卡号…...

聊天机器人框架Rasa资源整理

Rasa是一个主流的构建对话机器人的开源框架&#xff0c;它的优点是几乎覆盖了对话系统的所有功能&#xff0c;并且每个模块都有很好的可扩展性。参考文献收集了一些Rasa相关的开源项目和优质文章。 一.Rasa介绍 1.Rasa本地安装 直接Rasa本地安装一个不好的地方就是容易把本地…...

魔搭社区LLM模型部署实践, 以ChatGLM3为例(一)

魔搭社区LLM模型部署实践&#xff0c; 以ChatGLM3为 例 本文以ChatGLM3-6B为例&#xff0c; 主要介绍在魔搭社区如何部署LLM&#xff0c; 主要包括如下内容&#xff1a; ● SwingDeploy - 云端部署&#xff0c; 实现零代码一键部署 ● 多端部署 - MAC个人笔记本&#xff0c;…...

25期代码随想录算法训练营第十四天 | 二叉树 | 层序遍历(10道题)、226.翻转二叉树 、101.对称二叉树 2

目录 层序遍历 10226.翻转二叉树101.对称二叉树 2 层序遍历 10 链接 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right clas…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...

从零开始了解数据采集(二十八)——制造业数字孪生

近年来&#xff0c;我国的工业领域正经历一场前所未有的数字化变革&#xff0c;从“双碳目标”到工业互联网平台的推广&#xff0c;国家政策和市场需求共同推动了制造业的升级。在这场变革中&#xff0c;数字孪生技术成为备受关注的关键工具&#xff0c;它不仅让企业“看见”设…...