小程序中this.setData的使用和注意事项

2024-09-27 10:21:16

前言：微信小程序中经常需要用到this.setData({})把变量值渲染到视图层，那到底什么是this.setData，如何使用？需要注意哪些？作为一个初学者，分享一点我的经验，希望大家批评指正。

　　介绍：setData函数主要用于将逻辑层数据发送到视图层，同时对应的改变this.data.x的值。

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

使用：先给出代码，wxss没有什么意义就不贴了

index.wxml

 <view class="numview">test01======={{test01}}</view>
 <view class="numview">test02======={{test02}}</view>
 <button bindtap="testfun">测试</button>

index.js

Page({
 data: {
  test01: 1,
  test02: 2
 },
 testfun: function() {
  var that = this;
  if (this.data.test01 == 1) {
   that.setData({
    test02:8
   })
   console.log(this.data.test02)
  }
 },
 onLoad: function() {},
})

　　此时经过编译后模拟器的显示：

　　这里都容易理解，当点击了button按钮后，触发点击事件执行testfun函数，将test02设置为8，如图：

　　通过this.data.test02=8这种方式直接赋值可以吗，答案是不可以，看下面：

使用this.data.test02=10的结果不会渲染到前台页面中显示，但是后台已经改变，会造成前后台数据不一致。

我又想到是不是可以先通过this.data.test02=10赋值，再通过this.setData渲染呢？

 onLoad: function() {
  this.data.test02 = 10;
  this.setData({
   test02
  })
 }

编译报错：test02 is not defined;

为什么呢？再进行一项测试：

  onLoad: function() {
   this.data.test02 = 10;
   var test03 = 20;
   this.setData({
    test03
   })
   console.log(this.data.test03)
  }

编译后显示：

发现了什么？我个人觉得是这样的：

一、this.setData中设置的key如果只有key没有value，则从所在函数内找这个变量，找到之后渲染到前台指定位置。

　（1）如果Page对象的data中没有定义该key，则setData自动创建，这个可以从打印结果中发现（this.data.test03，data中没有定义）。

　（2）如果Page对象的data中已经定义该变量，则修改data中原变量的值。

二、this.setData中设置的key如果有key有value，直接渲染到前台并修改原data中的数据。

注意事项：

上面演示的使用说明也算是注意事项吧，理解透彻才能运用自如，避免数据混乱。

另外给出官方的setData建议：https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html

常见的 setData 操作错误

1. 频繁的去 setData

在我们分析过的一些案例里，部分小程序会非常频繁（毫秒级）的去setData，其导致了两个后果：

Android 下用户在滑动时会感觉到卡顿，操作反馈延迟严重，因为 JS 线程一直在编译执行渲染，未能及时将用户操作事件传递到逻辑层，逻辑层亦无法及时将操作处理结果及时传递到视图层；

渲染有出现延时，由于 WebView 的 JS 线程一直处于忙碌状态，逻辑层到页面层的通信耗时上升，视图层收到的数据消息时距离发出时间已经过去了几百毫秒，渲染的结果并不实时；

2. 每次 setData 都传递大量新数据

由setData的底层实现可知，我们的数据传输实际是一次 evaluateJavascript 脚本过程，当数据量过大时会增加脚本的编译执行时间，占用 WebView JS 线程，

3. 后台态页面进行 setData

当页面进入后台态（用户不可见），不应该继续去进行setData，后台态页面的渲染用户是无法感受的，另外后台态页面去setData也会抢占前台页面的执行。

总结

以上所述是小编给大家介绍的小程序中this.setData的使用和注意事项,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

浅谈小程序 setData学问多

为什么不能频繁 setData 先科普下 setData 做的事情: 在数据传输时,逻辑层会执行一次 JSON.stringify 来去除掉 setData 数据中不可传输的部分,之后将数据发送给视图层.同时,逻辑层还会将 setData 所设置的数据字段与 data 合并,使开发者可以用 this.data 读取到变更后的数据. 因此频繁调用,视图会一直更新,阻塞用户交互,引发性能问题. 但频繁调用是常见开发场景,能不能频繁调用的同时,视图延迟更新呢? 参考 Vue,我们能知道,Vue 每次赋
微信小程序使用setData修改数组中单个对象的方法分析

本文实例讲述了微信小程序使用setData修改数组中单个对象的方法.分享给大家供大家参考,具体如下: 微信小程序已经出来挺久的时间了,之前只是在文档上粗略的看了一下,最近稍得空闲,便利用微信小程序平台写一个练手的项目,顺便学习一下小程序开发,感觉大体跟前端开发基本类似,但是因为是在微信的平台上运行,具体还是要根据小程序的规则来编写代码的,其中还是有部分的内容跟前端中常见的有所不同,于是接下来的博客里,也会顺手记录微信小程序开发过程中的一些坑,帮助后来的小程序开发者少踩一些坑,当然我踩的坑大部分都
微信小程序 setData的使用方法详解

微信小程序 setData的使用方法详解最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元素的属性时,是这么使用的: Page({ data: { array: [{text: 'init data'}], }, changeItemInArray: function() { this.setData({ 'array[0].text':'changed data' }) } }) 使用了 'array[0].text' : '
微信小程序报错：this.setData is not a function的解决办法

微信小程序报错:this.setData is not a function 在page中定义的代码如下,代码会报错:this.setData is not a function <strong> pasteEncryptedText:function()</strong>{ let decryptedPass = this.data.decryptedPassword; if (decryptedPass == '' ){ wx.showToast({ title: '请先输入
微信小程序 setData使用方法及常用错误解决办法

微信小程序 setData使用方法及常用错误解决办法最近在弄微信小程序,类似于共享单车用来练练手,基本原理就是小程序发送经纬度给服务器,服务器从数据库中检索经纬度附近的单车传给小程序. 就在这里..没错就是这里,传回来的值是以jsonarray格式传过来的. 我需要将jsonarray进行解析获取经纬度,ID等车辆信息,然后赋值给小程序地图上的mark,一般我的思路时直接用个for循环给每个mark进行赋值然后再Setdata一下就ok, 结果没想到小程序setData()设置数组对象的某个元
微信小程序中this.data与this.setData的区别详解

一.摘要小程序中我们会经常使用到this.data与this.setData.其中this.data是用来获取页面data对象的,而this.setData是用来更新界面的.那么他们之间的区别与联系你真的搞懂了吗? Page.prototype.setData() setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值. 注意: 直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致. 单次设置的数据不能超过1024kB,请尽量避免一次
微信小程序 setData 对 data数据影响问题

我是纯前端的,有些时候没有后端接口,只能模拟一些数据来操作.偶然之下,发现了setdata 的一些机制,也有可能不对,请多指教. 先放结论:data的变量通过setdata绑在一起,是同步变化的准备做一个一键还原界面的按钮事件,如果有后端接口,只需调一下接口,就可以了.问题是没有,于是想弄两个一模一样的数组A,B:A用来渲染界面,一键还原的时候,就把B的值赋给A,从而引起页面重新渲染,达到重置界面的效果. 结果一点反应也没有. data里有模拟的数组 itemleft itemright,
小程序中this.setData的使用和注意事项

前言:微信小程序中经常需要用到this.setData({})把变量值渲染到视图层,那到底什么是this.setData,如何使用?需要注意哪些?作为一个初学者,分享一点我的经验,希望大家批评指正. 介绍:setData函数主要用于将逻辑层数据发送到视图层,同时对应的改变this.data.x的值. 参数:Object 以 key : value 的形式表示,将 this.data 中的 key 对应的值改变成 value. 使用:先给出代码,wxss没有什么意义就不贴了 index.wxml
微信小程序中顶部导航栏的实现代码

微信小程序中顶部导航栏的实现实例代码: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view> <view class="swiper-tab-list {{curre
微信小程序中input标签详解及简单实例

微信小程序中input标签详解及简单实例使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对
微信小程序中使元素占满整个屏幕高度实现方法

微信小程序中使元素占满整个屏幕高度实现方法在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情况下才可以. 以前我的做法是用js获取屏幕的高度,然后将其赋值给height, 屏幕高度在网页中为:window.innerHeight; 在微信小程序中则需要调用wx.getSystemInfo接口,然后通过setData赋值但是显然通过js来进行的,
详解微信小程序中的页面代码中的模板的封装

详解微信小程序中的页面代码中的模板的封装最近在进行微信小程序中的页面开发,其实在c++或者说是js中都会出现这种情况,就是相同的代码会反复出现,这就是进行一定的封装,封装的好处就是可以是程序中在于减少一定的代码量,并且可是使代码结构更加清晰.那今天所要记录的就是关于微信小程序中的页面的模板封装. 在微信小程序中的文件名都带有wxml等样式,在wxml中提供了模板,即可以在模板中定义代码片段,然后可以在页面中的不同位置进行调用,模板的定义: <templatename="products&
Linux 命令查询小程序中的 WePY 云开发实践

大家好,今天我来为大家分享一下, Linux 命令查询小程序中的 WePY 云开发实践. Why WePY 首先,先分享一下为什么要选择 WePY ? 在项目开始进行选型的时候,我可选的底层框架有 WePy.MPVue.Taro.MinUI,这些框架都是工程化做得很好的框架,可以帮助小程序项目长期进行维护.其中,Taro 因为采用的是我所不熟悉的 React ,所以从一开始就被排除.MPVue 我看了以后,它更多是给 Web 开发者提供小程序转化工具,而不是给小程序开发者提供类 Vue 工具,所
微信小程序中遇到的iOS兼容性问题小结

前言随着小程序的热度不减,更多的电商大佬来时使用小程序,在微信小程序开发中,经常会遇到一些兼容性的问题,下面这篇文章就记录下在微信小程序中遇到的一些兼容性问题,iOS兼容性 1.iOS中input的placeholder属性字体不居中对placeholder设置line-height及font-size 对input设置高度 2.iOS中滚动卡顿设置-webkit-overflow-scrolling:touch; 3.微信小程序中解决iOS中new Date() 时间格式不兼容在实现倒
微信小程序中显示倒计时代码实例

wxml文件中:  <view class="countDownTimeView countDownAllView" > <view class="voteText countDownTimeText">{{countDownDay}}天</view> <view class="voteText countDownTimeText">{{countDownHour}
微信小程序中悬浮窗功能的实现代码

问题场景所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"

小程序中this.setData的使用和注意事项

相关推荐

随机推荐