微信小程序————setData()方法的使用和注意事项

article/2025/8/27 0:04:17

微信小程序setData()使用:


##Page.prototype.setData(Object data, Function callback)
setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。
参数说明:
这里写图片描述

Object 以 key: value 的形式表示,将 this.data 中的 key 对应的值改变成 value。

其中 key 可以以数据路径的形式给出,支持改变数组中的某一项或对象的某个属性,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。

注意:

  1. 直接修改this.data,而不调用this.setData(),是无法改变当前页面的状态的,会导致数据不一致
  2. 仅支持可以JSON化的数据
  3. 单次设置的数据不能超过1024KB,尽量避免一次设置过多的数据
  4. 不要把data中的任何一项的value设为undefined,否则这一项将不能被设置,可能会有潜在的问题

代码示例:

Page({/*** 页面的初始数据*/data: {value:"初始值"    //定义一个变量value,赋值为:“初始化”},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {}})

在页面中显示:

这里写图片描述

在onLoad()函数中调用setData()

  onReady: function () {this.setData({value:"调用setData()修改后的值"})},

再次运行:
这里写图片描述


##在wx:request()中使用
代码:

wx:wx.request({url: 'http://127.0.0.1:7011/ibeacon/mobile.asmx/getRequest',data:{userid:this.data.username},header: {'content-type': 'application/json'},method: 'POST',dataType: 'json',success: function(res) {console.log(JSON.parse(res.data.d));  var value = JSON.parse(res.data.d);this.setData({postData:value})},fail: function(res) {},complete: function(res) {},});

####这里会出现一个问题:直接在wx:request()的success回调函数中使用this.setData()会报这样一个错误:
这里写图片描述

因为这里的this是相对于wx:request()的当前对象,我们可以这样解决:因为这里的wx:rewuest()是在页面加载时调用,所以我们可以在onLoad()中定义一个变量that ,将this赋值给that,那么此时的that代表相对于onLoad()的当前对象,然后在success回调函数中直接使用that.setData()即可。

完整代码如下:

//js代码
onLoad: function (options) {console.log(options);var that = this;var userid = options.userid;that.setData({username: userid})// this.data.username = JSON.stringify(options);console.log(this.data.username);wx:wx.request({url: 'http://180.169.225.27:7011/ibeacon/mobile.asmx/getRequest',data:{userid:this.data.username},header: {'content-type': 'application/json'},method: 'POST',dataType: 'json',success: function(res) {console.log(JSON.parse(res.data.d));  var value = JSON.parse(res.data.d);that.setData({postData:value})},fail: function(res) {},complete: function(res) {},});}
//wxml代码
<view wx:for="{{postData}}">posno:{{item.posno}},TradeTime:{{item.TradeTime}}</view>

正常获取到服务器返回的数据:
这里写图片描述


##还有一个需要注意到地方就是:
###如果在onReady()函数中调用setData()方法,那么通过这个方法设置的值只能刷新一次,若需要再次刷新,需要清除缓存。

参考资料:微信公众平台


http://chatgpt.dhexx.cn/article/2Ygvggho.shtml

相关文章

微信小程序setData注意事项,使用方法

1..微信小程序开发中&#xff0c;为了减少data和视图层数据表现不一致&#xff0c;全部采用setData方法修改值。 setData函数注意事项 1..直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的&#xff0c;还会造成数据不一致。 2..单次设罟的数据不能超过1024kB&…

layui自定义table中的templet

1.效果图如下 2.后端返回数据如下 3.实现代码如下 {field: "triggerPara",title: "触发参数",templet: function (d) {let text"" , type;for(let i 0 ; i < d.triggerPara.length ; i ){if(d.triggerPara[i].type 0){type 门禁}else i…

layui table 更新行触发templet重新渲染

更新方法 obj.update({// 这里的字段必须要在 table.render.cols.filed 有定义&#xff0c;否则无法触发表格渲染// key 决定是否重新渲染某一列&#xff0c;value 由 templet 里的语句进行逻辑处理canView: !data.canView }); , {field: canView, title: 操作, toolbar: #te…

layui2.4.5版本解决table使用templet导出数据问题

在使用 table 自带的导出功能时对使用了templet的数据导出为空 使用较高的版本可以解决此类问题&#xff1a;https://gitee.com/layui/layui/issues/I40UJ9 但是此文章中的项目比较老以及页面功能都比较多升级layui版本可能会影响比较大&#xff0c;所以就对layui源码进行微调…

layui表格使用自定义模板templet

前言 在前文 layuispringboot实现表格增删改查 中&#xff0c;我们展示了如何使用layui将数据库数据渲染到前端表格中&#xff0c;但现在问题来了&#xff0c;如果不加特殊处理&#xff0c;前端表格直接显示数据库存储信息是不合适的&#xff0c;例如数据库有一个类型字段&…

layui 动态表格 templet模板函数

1&#xff0c;需求说明 关于动态标题栏的相关知识跳转链接&#xff1a;layui 静态 动态复杂多表头 2&#xff0c;尝试的用法 var chenbenkemuList${chenbenkemuList};var columnAry[]for (var i 0; i < chenbenkemuList.length; i) {var onechenbenkemu chenbenkemuList[…

layui:templet

在使用layui-table的时候,由于它每次都是动态刷新,无法保存我们做的一些页面上元素的修改。 我希望我设置完默认地址之后,下次访问应该是和这次一样变成了灰色的。 这个时候要用到templet,官方文档中的{{d}}就是table获取回来的data,直接做判断,设置样式即可! <

LayUi 之 templet

templet是什么东西&#xff1f; 我们都知道LayUi中有模板&#xff0c;就是把我们需要展示的东西放在模板中展示&#xff0c;你就比如我们想要展示一些数据&#xff0c;但是这些数据不是我们想要的数据或者不是我们想要的样子&#xff0c;这个时候我们可以通过模板前端更改一下…

Jstack线程状态BLOCKED/TIMED_WAITING/WAITING解释

一、线程5种状态 1.新建状态&#xff08;New&#xff09; 新创建了一个线程对象。 2.就绪状态&#xff08;Runnable&#xff09; 线程对象创建后&#xff0c;其他线程调用了该对象的start()方法。该状态的线程位于可运行线程池中&#xff0c;变得可运行&#xff0c;等待获取C…

java线程状态(六种五种)

java线程的状态常见的有两种说法&#xff0c;一种是将其分为6种一种是分为5种 1. 六种&#xff1a; 划分依据&#xff1a;主要是从java代码的角度来进行划分。 1. 新建状态 &#xff1a; 使用new关键字创建一个thread对象&#xff0c;刚刚创建出的这个线程就处于新建状态。在…

统计Java进程中的线程状态(jstack+linux)

统计Java进程中的线程状态 第一步&#xff1a;查看Java进程ID 第二步&#xff1a;使用jstack命令dump线程信息&#xff0c;看看pid45890进程中的线程都是什么状态 /usr/local/java/jdk1.8.0_144/bin/jstack 84976 >/opt/test.dump第三步&#xff1a;统计所有线程分别处于什…

线程状态图

1. 新建状态(New) : 线程对象被创建后&#xff0c;就进入了新建状态。例如&#xff0c;Thread thread new Thread()。 2. 就绪状态(Runnable): 也被称为“可执行状态”。线程对象被创建后&#xff0c;其它线程调用了该对象的start()方法&#xff0c;从而来启动该线程…

Java 线程状态之 TIMED_WAITING

定义 一个正在限时等待另一个线程执行一个动作的线程处于这一状态。 A thread that is waiting for another thread to perform an action for up to a specified waiting time is in this state. 更详细的定义还是看 javadoc&#xff08;jdk8&#xff09;&#xff1a; 带指定…

jstack 线程状态

转自 http://www.cnblogs.com/nexiyi/p/java_thread_jstack.html jstack 线程状态 jstack 线程里&#xff0c;值得关注的线程状态有&#xff1a; 死锁&#xff0c;Deadlock&#xff08;重点关注&#xff09; 执行中&#xff0c;Runnable 等待资源&#xff0c;Waiting on co…

Java 中线程状态有哪些?

写在前面 本文隶属于专栏《100个问题搞定Java并发》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和文献引用请见100个问题搞定Java并发 解答 线程的状态在java中有明确…

理解Java线程状态(6种,6种,6种)

什么是线程 线程具有许多传统进程所具有的特征&#xff0c;故又称为轻型进程(Light—Weight Process)或进程元&#xff1b;而把传统的进程称为重型进程(Heavy—Weight Process)&#xff0c;它相当于只有一个线程的任务。在引入了线程的操作系统中&#xff0c;通常一个进程都有…

图文详解jvm中的线程状态

本文使用下面这张图详细介绍JAVA线程的六种状态 JAVA线程的六种状态详解 在java.lang.Thread类中&#xff0c;定义了线程的以下六种状态(同一个时刻线程只能有一种状态) NEW&#xff08;新建&#xff09; 这个状态是指线程刚创建&#xff0c;但还未调用线程的start()方法进…

python封装线程类(启动、终止、查看线程状态)

文章目录 一、简单说明二、实现步骤三、测试 一、简单说明 将启动、终止和查看线程状态的方法封装成类声明时传入要启动的方法通过 start、stop 和 state 执行启动、终止 和 查看状态 二、实现步骤 # encoding: utf-8import time import threading import inspect import ct…

一文搞懂线程世界级难题——线程状态到底是6种还是5种!!!

背景 先来解答一个世界级难题&#xff1a; java线程有多少种状态&#xff1f; 答案是6种&#xff01;&#xff01;&#xff01; 那为什么有的地方说是5种呢&#xff0c;那这一定是将操作系统层面的线程状态搞混了。 下面我们就分别介绍一下java线程的6种状态以及操作系统层…