• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >微信小程序 > 微信小程序如何解决后台返回大量多余数据的问题

微信小程序如何解决后台返回大量多余数据的问题

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-11-30

匿名通过本文主要向大家介绍了微信小程序等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本篇文章给大家带来的内容是关于微信小程序如何解决后台返回大量多余数据的问题,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

台接口返回一个数组,数组里面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,以此来提高微信小程序的页面渲染速度,提升微信小程序运行效率,优化微信小程序的用户体验。
我们可以这样写:

[mw_shl_code=applescript,true] 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)
[/mw_shl_code]

或者使用高阶函数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.objobj.b = "我是后来修改的"this.setData({ obj: obj})

2)但是更优化的做法是

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

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

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

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

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

相关推荐:

微信小程序中格式化时间的代码实现

以上就是微信小程序如何解决后台返回大量多余数据的问题的详细内容,更多请关注微课江湖其它相关文章!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2018-11-30微信小程序中天气预报开发的代码
  • 2018-11-30教你如何作为第三方平台开发微信小程序详解
  • 2018-11-30微信小程序 教程之模板
  • 2018-11-30微信小程序开发怎样获取AppID
  • 2018-08-20微信小程序开发教程手册文档
  • 2018-11-30微信小程序 wx:key详细介绍
  • 2018-11-30实现微信小程序的在线支付功能代码解析
  • 2017-06-20微信小程序聊天室demo代码
  • 2018-11-30微信小程序之拖拽image触摸事件监听的实现方法介绍
  • 2018-11-23微信小程序云开发服务端数据库API 获取记录的引用

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 微信小程序仿 「ONE · 一个」demo代码
    • 微信小程序小熊の日记demo代码
    • 微信小程序中图片预加载组件 wxapp-img-loader的使用介绍
    • 微信小程序MUI数字输入框效果的实现方法
    • 微信小程序实现与后台PHP交互
    • 微信小程序表单组件 checkbox
    • 关于微信小程序开发详解文章推荐
    • 公共接口API集合
    • 有关自动布局的文章推荐
    • 微信H5开发 调用openApi

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有