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

打一架,不行就再打一架-----来源:视觉中国
后台接口返回一个数组,数组里面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的其他知识点,欢迎留言哦,同时知道为上面那个为啥要加 []的,希望多多指教!

赏我一个赞吧~~~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,718评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,683评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,207评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,755评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,862评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,050评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,136评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,882评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,330评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,651评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,789评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,477评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,135评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,864评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,099评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,598评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,697评论 2 351

推荐阅读更多精彩内容