微信小程序后台返回大量多余数据的处理

打一架,不行就再打一架-----来源:视觉中国

后台接口返回一个数组,数组里面N多对象,每个对象里面几十上百条数据,最好玩的是,我只需要每个对象里面的某两个数据、、、、

类似这种:

datas:[
  {
      id:1000,
      name: "帅哥",
      title: '...',
      b: '...',
      d: 0,
      f:0,
      ....
  },
  {
      id:1001,
      name: "美女",
      title: '...',
      b: '...',
      d: 0,
      f:0,
      ....
  },
  ...
]

其实我只要id和name,找后台解决、、、算了吧,奈何天生就是个儒生,温文尔雅,打架是打不赢的,要是能打赢的就直接打吧,打完让他们改!

数据量过多,对网络请求影响大吗?说实话,不大,又不是几兆的图片,返回数据的速度反正我感受不到延迟。

但是数据量过多对小程序渲染界面有影响吗?

答案是:有!

一般情况下我们是在wxml中循环data,然后取出item.id和item.name,其他数据看起来和我们无关,但是查看官方文档setData相关信息的时候有下面这一段话

setData 是小程序开发中使用最频繁的接口,也是最容易引发性能问题的接口。在介绍常见的错误用法前,先简单介绍一下 setData 背后的工作原理。

工作原理

小程序的视图层目前使用 WebView 作为渲染载体,而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上,WebView 和 JavascriptCore 都是独立的模块,并不具备数据直接共享的通道。当前,视图层和逻辑层的数据传输,实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据,需要将其转换为字符串形式传递,同时把转换后的数据内容拼接成一份 JS 脚本,再通过执行 JS 脚本的形式传递到两边独立环境。 而 evaluateJavascript 的执行会受很多方面的影响,数据到达视图层并不是实时的。

其实就是我们setData里面的所有数据都被转成了字符串,然后字符串邮费转换成JS脚本,然后页面根据JS脚本去渲染页面。

那么我们能做的就是尽量少传数据,而此时后台返回这一大串数据就与此相悖了,所以最好是新建一个tempData,将要的数据取出来之后再setDta这个tempData,以此来提高微信小程序的页面渲染速度,提升微信小程序运行效率,优化微信小程序的用户体验。

我们可以这样写:
    var tempData = []
    for(var i = 0; i < datas.length; i++) {
      var tempObj = {}
      tempObj.id = datas[i].id
      tempObj.name = datas[i].name
      tempData.push(tempObj)
    }
    console.log(tempData)
或者使用高阶函数map():
let tempDatas = datas.map(function(data){
      return {
        id: data.id,
        name: data.name 
      } 
 })
console.log(tempDatas)
此时我们再使用setData({})就能提高渲染效率了

以上就是微信小程序开发中关于后台返回大量冗余数据的处理方案啦,在一定程度上是能提升微信小程序的运行效率的,当然最最最直接的方法就是和后台打一架,谁输了谁去优化代码!!!!

同时再分享两个setData技巧
1、有一个Object如下
obj:{a:"a",b:"b",c:"c"},

此时已经渲染到页面了,然后我们修改了obj,此时可以选择:

1)平时的做法
let obj = this.data.obj
obj.b = "我是后来修改的"

this.setData({
  obj: obj
})
2)但是更优化的做法是
this.setData({
  'obj.b': "我是后来修改的"
})

不仅省了两行代码,同时还提高页面渲染效率

2、其实和1差不多,就是Object变成数组Array

当我们要给数组的其中一个数据进行修改时,我们可以参照上面的方法

this.setData({
  'array[1]': "我是后来修改的"
})

当我们要给数组的多个数据进行修改时,我们会写一个循环,然后修改array[i],此时是无法识别的,要写成如下形式

  for(var i = 0;i < 5;i++) {
      this.setData({
        [`array[${i}]`]:"我是后来修改的"
      })
  }

小伙伴们还有其他有关微信小程序setData的其他知识点,欢迎留言哦,同时知道为上面那个为啥要加 []的,希望多多指教!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小狼的世界

学习使用YUI3

对YUI一直很有好感,最近开始看了看YUI CSS GRID,发现这个理念非常好,非常有利于我们工作效率的提高,特别是熟悉了这套CSS之后,我们就不必每一个项目...

832
来自专栏深度学习之tensorflow实战篇

python2.7进行爬虫百度POI代码(划分小网格算法)

查询许久,最终选择一个,之前一直py3.6不成功,换了2.7就好多了。如果有重复去下重即可。 这里面非常重要的基类对象的init()方法与超类方法,将在下面进行...

4617
来自专栏张善友的专栏

Expression Web设计工具

从MS company store买了个Expression web软件,在Vista下安装了一个,今后可以用这个工具和Vistual studio 2005协...

19710
来自专栏大史住在大前端

【Recorder.js+百度语音识别】全栈方案技术细节

技术栈:React+recorder-tool.js +recorder.js + Express + Baidu语音识别API

4603
来自专栏一个会写诗的程序员的博客

一篇文章读懂 React and redux 前端开发 -DvaJS, a lightweight and elm-style framework.快速上手Dva 概念 #例子和脚手架Dva 图解K

DvaJS: React and redux based, lightweight and elm-style framework.

1903
来自专栏前端侠2.0

bootstrap-datetimepicker的功能优化

引用:bootstrap 和 bootstrap-datetimepicker CSS文件

3901
来自专栏IMWeb前端团队

移动端tryjs异常捕获

上周处理了一下群活动的badjs,第一步是摆脱Script error.,捕获异常栈,找到自己是错在哪里~ 分享一下这个步骤 异步的切入点: 1、XMLHttp...

2216
来自专栏封碎

Android的webview研究

最近做的项目大量用到了 webview ,用网页来布局。 Android 的 webview 是基于 webkit 内核,不过他的运行效果和 firefox 上...

1161
来自专栏人工智能头条

机器学习新手必看:Jupyter Notebook入门指南

2064
来自专栏IT派

机器学习新手必看:Jupyter Notebook入门指南

【导读】Jupyter Notebook 是一个 Web 应用程序,便于创建和共享文学化程序文档,支持实时代码、数学方程、可视化和 Markdown,其用途包括...

3834

扫码关注云+社区

领取腾讯云代金券