专栏首页韦弦的偶尔分享微信小程序后台返回大量多余数据的处理

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

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

后台接口返回一个数组,数组里面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 条评论
登录 后参与评论

相关文章

  • 100 Days of SwiftUI —— Day 11:协议和扩展

    今天,您将学习一些真正的Swifty功能:协议和面向协议的编程(protocol-oriented programming —— POP)。

    韦弦zhy
  • 100 Days of SwiftUI —— Day 10:类

    最初,类看起来与结构体非常相似,因为我们使用它们来创建具有属性和方法的新数据类型。但是,它们引入了一个新的,重要的且复杂的功能,即继承——使一个类在另一个类的基...

    韦弦zhy
  • SwiftUI:验证和禁用表单

    SwiftUI的Form视图允许我们以一种非常快速和方便的方式存储用户输入的信息,但有时更进一步很重要——在继续之前检查输入以确保其有效。

    韦弦zhy
  • Docker下,实战mongodb副本集(Replication)

    在《Docker下,极速体验mongodb》一文中我们体验了单机版的mongodb,实际生产环境中,一般都会通过集群的方式来避免单点故障,今天我们就在Docke...

    程序员欣宸
  • Python中&、^与and、or

    GhostCN_Z
  • Fiddler无法抓取HTTPS的问题,Fiddler证书无法安装终极解决方案,

    win7下Fiddler证书安装之后,总是无法抓取https的包;网上搜了很多方法都没解决问题,最终摸索解决方法如下:

    双面人
  • python 动态获取类或者函数 pkgutil 动态引入模块

    一般情况下,我们会用类似 someDict['keyName'] 的方法,来获取键值内容。但是,如果这个键名不存在的话,就会报错。所以,在不确定的地方,推荐使用...

    FungLeo
  • MySQL命令执行过程和存储引擎概述

    上集我们说了视图和存储程序,它们都可以方便我们复用某些语句。其中,视图是一种虚拟表,本质上是另一个查询语句的别名;存储程序是许多语句的一个封装,根据调用方式的不...

    用户2802329
  • 看视频(大片)罗振宇和罗永浩长谈 9 个小时

    创业者面对的八个重要关系 彪悍、情怀……很多标签都与我无关 ?

    前朝楚水
  • 《hadoop权威指南》笔记二: hdfs读写过程剖析

    Hadoop分布式文件系统(HDFS)被设计成适合运行在通用硬件(commodity hardware)上的分布式文件系统。

    皮皮熊

扫码关注云+社区

领取腾讯云代金券