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

Posted 2020-12-30 jile

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

 

类似这种：

1.  
   datas:[
2.  
   {
3.  
   id:1000,
4.  
   name: "帅哥"，
5.  
   title: ‘...‘,
6.  
   b: ‘...‘,
7.  
   d: 0,
8.  
   f:0,
9.  
   ....
10.  
    },
11.  
    {
12.  
    id:1001,
13.  
    name: "美女"，
14.  
    title: ‘...‘,
15.  
    b: ‘...‘,
16.  
    d: 0,
17.  
    f:0,
18.  
    ....
19.  
    },
20.  
    ...
21.  
    ]

 

其实我只要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，以此来提高微信小程序的页面渲染速度，提升微信小程序运行效率，优化微信小程序的用户体验。

我们可以这样写：

1.  
   [mw_shl_code=applescript,true] var tempData = []
2.  
   for(var i = 0; i < datas.length; i++) {
3.  
   var tempObj = {}
4.  
   tempObj.id = datas[i].id
5.  
   tempObj.name = datas[i].name
6.  
   tempData.push(tempObj)
7.  
   }
8.  
   console.log(tempData)
9.  
   [/mw_shl_code]

或者使用高阶函数map()：

1.  
   let tempDatas = datas.map(function(data){
2.  
   return {
3.  
   id: data.id,
4.  
   name: data.name
5.  
   }
6.  
   })
7.  
   console.log(tempDatas)

此时我们再使用setData({})就能提高渲染效率了

同时再分享两个setData技巧

1、有一个Object如下

 

obj:{a:"a",b:"b",c:"c"},

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

1）平时的做法

let obj = this.data.objobj.b = "我是后来修改的"this.setData({ obj: obj})

 

2）但是更优化的做法是

this.setData({ ‘obj.b‘: "我是后来修改的"})

不仅省了两行代码，同时还提高页面渲染效率2、其实和1差不多，就是Object变成数组Array当我们要给数组的其中一个数据进行修改时，我们可以参照上面的方法

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

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

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

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

 

专栏作家

韦弦zhy 。小程序社区博主。分享小程序开发实战，坚持原创。

本文原创发布于小程序社区。未经许可，禁止转载
原文地址：微信小程序后台返回大量多余数据的处理-小程序社区/博主专区-微信小程序开发社区-微信小程序联盟

 

相关文章

微信小程序 使用wxs计算获取到的数据

微信小程序JSON数据的传递
小程序页面效果之--滑动屏幕加载数据