微信小程序开发避免频繁的setData调用

最新推荐文章于 2022-09-04 12:38:05 发布
最新推荐文章于 2022-09-04 12:38:05 发布
阅读量3.6k 收藏 3
点赞数
分类专栏： 前端技术 文章标签： 微信小程序 setData 性能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/romantic_love/article/details/99844972
版权

使用mpvue开发小程序，这时候得注意，对Page对象的data里面赋值的时候，实际上mpvue是讲它转化成了setData()的调用。这时候得注意，避免频繁的setData赋值操作，对性能的开销太大，尤其是在安卓机，卡顿成狗。

比如说：

对页面或scroll-view组件的滚动回调做计算处理时，这里应该特别注意。

 

 

https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html

我想叫蜡笔小小新呀
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
解决小程序onPageScroll 高频率设置setData问题
挚友阳光的博客
05-09 827
微信小程序onPageScroll 频繁操作setData 解决
小程序 处理页面频繁的setData操作
涛々的技术博客
04-19 1324
// 500毫秒执行一次 clearTimeout(that.timeoutId); that.timeoutId = setTimeout(() => { that.setData({ isShowSuspend: true }); delete that.timeoutId; }, 500); 记录一下～
解决小程序频繁setData安卓的问题
Veni的博客
01-11 2743
小程序写了一个滑动手机屏幕，进度条随着变动，在滑动过程中，touchmove会毫秒级的频繁触发，会影响页面的渲染，安卓手机上进度条不仅会出现一跳一跳的感觉，还会有缓冲，手指滑动动作已经结束，但是进度条还在变化。解决这个的思路就是设置时间间隔，虽然这样进度条也会出现一跳一跳的感觉，但是缓冲的bug会好很多。暂时还没有找到更好的办法，也希望大家能提供更好的思路。 //滑动开始事件 handlet...
微信小程序优化
diaojun0032的博客
03-11 6328
setData setData是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。在介绍常见的错误用法前，先简单介绍一下setData背后的工作原理。 工作原理 小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据...
setData数据量传输限制，导致小程序卡顿
weixin_48180838的博客
03-25 1573
2021 / 3 / 25 setData修改变量 setData设置数据量是有限的，单次设置的数据大小不得超过1024kb，否则就会出现卡顿。 比如: 当触底加载的时候，每次数据都是老数据加上新获取的数据，然后一起通过setData提交并重新渲染页面。因为是所有数据重新渲染，当数据过大的时候就会出现卡顿情况。 解决方案 每次setData数据，只存放新的数据 eg: data: { nowPage: 0, list: [] } getListData() { let newList = [...];
微信小程序点餐系统微信小程序开发实战
06-07
项目实战中提供的"点餐demo"可能是已经完成部分功能的源代码，学习者可以通过阅读和修改这些代码，加深对微信小程序开发的理解。同时，也可以参考这个示例来构建自己的点餐系统。 六、小程序开发注意事项 1. 规范...
微信小程序项目-美食列表
最新发布
05-13
本项目“微信小程序项目-美食列表”是为小程序开发初学者设计的一个实践案例，旨在帮助他们更好地理解和掌握微信小程序的开发技能。 首先，我们要了解微信小程序的基本结构。一个小程序通常包含app.json、index....
微信小程序使用canvas绘制实现时钟
11-01
此外，微信小程序中canvas的性能和浏览器中的canvas略有不同，需要注意优化绘制过程，避免过于频繁的重绘。 在这个clockDemo中，我们可以看到如何将微信小程序的canvas组件与JavaScript结合，实现动态的时钟功能。...
微信小程序-简易音乐音乐源码.zip
03-27
【微信小程序-简易音乐音乐源码.zip】是一个包含微信小程序开发的源代码包，主要用于创建一个简单的音乐播放应用。这个项目对于学习微信小程序的开发、音频处理以及移动应用设计具有很高的参考价值。以下是对其中...
微信小程序开发-快递单号查询案例源码.zip
12-12
在本压缩包“微信小程序开发-快递单号查询案例源码.zip”中，包含了一个针对微信小程序开发的实例，主要用于实现快递单号的查询功能。这个案例可以帮助开发者深入理解微信小程序的开发流程、API调用以及数据处理。...
【微信小程序】性能优化
weixin_34365417的博客
07-14 6724
内容整理于微信公开课 为什么要做性能优化？ 一切性能优化都是为了体验优化 1. 使用小程序时，是否会经常遇到如下问题？ 打开是一直白屏 打开是loading态，转好几圈 我的页面点了怎么跳转这么慢？ 我的列表怎么越滑越卡？ 2. 我们优化的方向有哪些？ 启动加载性能 渲染性能 3. 启动加载性能 1. 首次加载 你是否见过小程序首次加载时是这样的图？ 这张图中的三...
小程序setdata数据限制的解决办法
寻宋的博客
05-17 4138
出现的问题： 解决办法： 1、将数组中不使用的过滤掉 //_recordList是push得到的数组 _recordList.forEach(function(item,index,array){ array[index]={ device:item.device, } 这种方法会在数据量大的时候出现相同的问...
小程序SetData同步还是异步问题
景色分明
07-14 1万+
小程序SetData同步还是异步 刚进新公司不久,学了几天小程序,由于之前是用React的,所以学起来相对轻松,但是也有许多不同,不明白的点. 问题 React中,this.setState是异步的,改变state之后是不能立马获取到改变之后的值的. this.setState({ name:'zhang' }) console.log(this.state.name);/...
微信小程序开发04 性能优化：借助微信开发者工具提升小程序性能
fegus的博客
09-04 1760
通过以上内容我们不难看出来，微信 IDE 的体验评分功能给出的性能优化方案跟 Web 应用的性能优化方案大同小异，尤其是使用 Vue/React 这类 MVVM 框架的 Web 应用。微信 IDE 给出的这些建议能够很好地帮助我们写出性能更好的小程序代码以及搭建高性能的前后端架构，不过现实中小程序的业务类型多种多样，这些性能优化的方案也只是从单纯的技术角度出发，对于不同类型的业务来说，通常会有一些专属的优化措施，比如视频类小程序的分片加载、游戏类小程序的 canvas 优化等等。
前端局部自动刷新_微信小程序使用setData实现局部刷新
weixin_39955142的博客
02-11 2487
微信小程序中我们经常用setData来将数据从逻辑层发送到视图层(异步)，同时改变对应的this.data 的值(同步)。正常场景下，首次请求接口>接口返回数据>setData数据>视图渲染一般界面上都会有刷新按钮、或者下拉刷新，当点击刷新按钮，只想更新部分数据怎么办，这时就要用到局部刷新了。下面举例来具体实现：初始数据如下Page({/*** 页面的初始数据*/data: {...
vue2中src实现数据绑定遇到的问题
热门推荐
sinat_36555135的博客
05-13 2万+
在vue2.0中，src实现数据绑定稍不留神就不成功。假定value.src是绑定的数据。 常见错误写法1：<img src="value.src">错误之处在于： 1.属性值数据绑定应该用v-bind，应该写成v-bind:src="" 2.直接用引号"value.src"会报错，取不到值。常见错误写法2：<img src="{{value.src}}">常见错误写法3：<img src="
Vue作为组件在前端项目中的应用&Vue.set 的用法
weixin_33929309的博客
03-15 368
业务背景是，在jq的前端项目中加入Vue作为组件。 原本的登录功能是每个页面加一个登录弹窗（手机号+验证码验证登录），然后发ajax请求到后端，登录成功后再进行一些操作。 但随着需要登录的页面的增多，多个页面都需要添加相同的html，js，css以及前端登录逻辑，所以在原先的项目中添加了vue，将重复的添加的代码加入到了vue文件中，然后...
小程序性能优化以及常见setData操作错误
weixin_45720111的博客
11-21 1048
官方给出的小程序性能优化建议 setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。在介绍常见的错误用法前，先简单介绍一下 setData 背后的工作原理。 小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 evaluateJavascript 所实现。即用户传
小程序setData()超限怎么办
qq_41763797的博客
08-04 4114
最近在做一个翻页交互，遇到点setData的坑，最后想了个办法给绕过去了，但我不知道各位有没有更好的办法，在这里分享下我的处理办法； 例如我有个列表，这个列表的总数据量不确定有多少，经我们产品交代，大促期间，至少会有1000条，从小程序的开发文档里可以看到setData对数据的限制是1024KB，因为之前我看文档时没有注意到这一点，所以我一开始在做分页的时候就用了错误的方法，上代码: wxml...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值