【已验证-直接用】微信小程序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"
 

渲染结果如下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/139039.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大数据毕业设计选题推荐-生产大数据平台-Hadoop-Spark-Hive

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

junit写搜索树测试

用法 assertTrue(range.contains("Two")); 2个参数,右边错就打印左边. AbstractSelfBalancingBinarySearchTree abt; AbstractBinarySearchTree.Node node; Before public void setUp() { abt new AbstractSelfBalancingBinarySearchTree() { Override protecte…

Leetcode70 爬楼梯

假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方法可以爬到楼顶。 1. 1 阶 1 阶 2. 2 阶 示例 2&#xff1…

深度学习 python opencv 火焰检测识别 火灾检测 计算机竞赛

文章目录 0 前言1 基于YOLO的火焰检测与识别2 课题背景3 卷积神经网络3.1 卷积层3.2 池化层3.3 激活函数&#xff1a;3.4 全连接层3.5 使用tensorflow中keras模块实现卷积神经网络 4 YOLOV54.1 网络架构图4.2 输入端4.3 基准网络4.4 Neck网络4.5 Head输出层 5 数据集准备5.1 数…

近期的一些思考

1.对于程序员这个职业 &#xff0c;完全没有必要通过打工听人安排而活着&#xff0c;而是反过来通过在公司工作提高自己的技能&#xff0c;让自己可以更为独立和自由地生活。 2.没什么技术含量的工作&#xff0c;就像在学生时代那样交作业就好了。想尽一切方法提高交作业的效率…

Mysql数据库 14.SQL语言 视图

一、视图的概念 视图&#xff1a;就是由数据库中一张或多张表根据特定的条件查询出的数据狗造成的虚拟表 二、视图的作用 安全性&#xff0c;简单性 三、视图的语法 语法 create view 视图表 as select_statement; 代码实现 #创建视图 将查询结果创建称为视图&#x…

百度王颖:百度文库以AI创作能力突破语言边界,促进思想碰撞和文化融通

1月9日&#xff0c;2023年世界互联网大会乌镇峰会“网络传播与文明交流互鉴论坛”召开。百度副总裁、互娱和垂类平台负责人王颖出席并发表“以技术搭建跨文化交流桥梁”主题演讲。她表示&#xff0c;在大模型的加持下&#xff0c;百度各个产品都在重构&#xff0c;通过技术助力…

golang两个坑实录

1. 不可将一个error的具体对象&#xff0c;复制给一个error的interface。同理&#xff0c;不能将一个具体的指针对象&#xff0c;复制给一个interface。因为在interface判断为nil的时候&#xff0c;即使指针其实是nil&#xff0c;但是因为是赋值给interface了。导致interface其…

第24章_mysql性能分析工具的使用

文章目录 1. 数据库服务器的优化步骤2.查看系统性能参数3. 统计SQL的查询成本&#xff1a;last_query_cost4. 定位执行慢的 SQL&#xff1a;慢查询日志4.1 开启慢查询日志参数4.2 查看慢查询数目4.3 测试慢sql语句&#xff0c;查看慢日志4.4 系统变量 log_output&#xff0c; l…

跟着GPT学设计模式之工厂模式

工厂模式&#xff08;Factory Design Pattern&#xff09;分为三种更加细分的类型&#xff1a;简单工厂、工厂方法和抽象工厂。在这三种细分的工厂模式中&#xff0c;简单工厂、工厂方法原理比较简单&#xff0c;在实际的项目中也比较常用。而抽象工厂的原理稍微复杂点&#xf…

【小收获】给定一个自定义的大小关系,然后给出其中两个元素,要求判断它们的大小关系

思路&#xff1a;由于该自定义的大小关系编译器并不知道&#xff0c;所以可以给它们都搞一个下标&#xff0c;从而根据下标的大小关系去判断各个元素之间的大小关系 例如&#xff1a;扑克牌中单张牌的大小关系为&#xff1a;3<4<5<6<7<8<9<X<J<Q<…

k8s篇之underlay网络和overlay区别

k8s中underlay网络和overlay区别 一、网络 1 Overlay网络&#xff1a; Overlay叫叠加网络也叫覆盖网络&#xff0c;指的是在物理网络的基础之上迭代实现新的虚拟网络&#xff0c;即可使网络中的容器可以互相通信。 优点是对物理网络的兼容性比较好&#xff0c;可以实现pod的…

TensorFlow2.0教程3-CNN

` 文章目录 基础CNN网络读取数据卷积层池化层全连接层模型配置模型训练CNN变体网络简单的深度网络添加了其它功能层的深度卷积NIN网络文本卷积基础CNN网络 读取数据 import numpy as np import tensorflow as tf import tensorflow.keras as keras import tensorflow.keras.la…

uniapp中在组件中使用被遮挡或层级显示问题

uniapp中在组件中使用或croll-view标签内使用uni-popup在真机环境下会被scroll-view兄弟元素遮挡&#xff0c;在开发环境下和安卓系统中可以正常显示&#xff0c;但在ios中出现了问题 看了许多文章都没有找到问题的原因&#xff0c;最后看到这一个文章http://t.csdnimg.cn/pvQ…

acwing算法基础之数据结构--STL简介

目录 1 基础知识2 模板3 使用示例3.1 vector3.2 pair3.3 string3.4 queue 1 基础知识 无。 2 模板 vector, 变长数组&#xff0c;倍增的思想size() 返回元素个数empty() 返回是否为空clear() 清空front()/back() 使用时&#xff0c;必须判断向量类容器非空push_back()/po…

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);}二、创建…

138.随机链表的复制(LeetCode)

深拷贝&#xff0c;是指将该链表除了正常单链表的数值和next指针拷贝&#xff0c;再将random指针进行拷贝 想法一 先拷贝出一份链表&#xff0c;再对于每个节点的random指针&#xff0c;在原链表进行遍历&#xff0c;找到random指针的指向&#xff0c;最后完成拷贝链表random…

Docker 和 Kubernetes ,技术相同之处,和不同之处

目录 Docker 技术相同之处&#xff1a; 不同之处&#xff1a; Kubernetes 技术相同之处&#xff1a; 不同之处&#xff1a; Docker 技术相同之处&#xff1a; 容器化&#xff1a; Docker 和 Kubernetes 都是容器技术的代表。Docker 利用容器技术将应用程序及其所有依赖项…

CSS3 分页、框大小、弹性盒子

一、CSS3分页&#xff1a; 网站有很多个页面&#xff0c;需要使用分页来为每个页面做导航。示例&#xff1a; <style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; f…

SW如何显示样条曲线的控标

刚刚学习隔壁老王的sw画图时&#xff0c;怎么点都点不出样条曲线的控标&#xff0c;于是果断查询了一下解决方法&#xff0c;其实很简单&#xff0c;只不过是培训机构故意不说&#xff0c;叫你还解决不了&#xff0c;难受了就会花钱买他们的课了。毕竟如果学会了怎么解决问题了…