微信小程序数据操作上: 合理组装数据

1,284 阅读4分钟
原文链接: weappdev.com

论数据绑定的重要性

微信小程序中比较重要的几个点就是UI渲染、数据绑定、传值方式、模块调用等。
如果说在这几个方面中进行学习和研究排序,我认为**‘数据绑定’**应该是排在最重要位置。

数据绑定的重要性分析:
1. 微信小程序丧失DOM操作后,数据是唯一可以操作VIEW的方式
2. 对于受限1M的微信小程序,数据交互永远是第一位满足要素
3. 微信小程序的可发模式广义程度上应该是数据驱动开发

我想通过两篇文章来讲一下我对于微信小程序在数据绑定处理的心得。
1. 微信小城数据操作处理上:合理组装数据(本篇)
2. 微信小城数据操作处理下:深度操作数据

希望能够帮助到你的理解,以下所有的理解均为个人见解,如有错误欢迎批评指正。

本篇主要主要是为了下一篇的准备工作,通过一个列表的渲染进行解释如何合理的组装你的数据层,来达到优化VIEW层显示

数据绑定常见应用场景

  • 自定义tabbar切换
  • 视图隐藏与渲染
  • 样式渲染与添加
  • 动画效果
  • ...

基本上如果想要在小程序中与wxml相关的操作,都会涉及到数据的绑定

常规数据

  • 常见场景

如在内容小程序下,会有循环产生内容列表的需求,为了更佳理解组装数据,我们来设计一个操作较为复杂的场景。

下面几点的代码示例我已经准备好,以防你只看不做,或者有人眼高手低,看完文章觉得很简单,你可以自己尝试写一下上面的小例子,下篇文章末尾我会给出代码示例。

  1. 后台输入如下格式的内容列表信息

[{
    title: "文章1",
    brief: "文章1的简介",
    time: "2016-07-12",
    image: "http://atth.eduu.com/album/201203/12/1475134_1331559643qMzc.jpg"
},
{
    title: "文章2",
    brief: "文章2的简介",
    time: "2016-07-12",
    image: "http://pic51.nipic.com/file/20141027/11284670_094822707000_2.jpg"
},
{
    title: "文章1",
    brief: "文章1的简介",
    time: "2016-07-12",
    image: "http://pic.4j4j.cn/upload/pic/20130815/31e652fe2d.jpg"
}]
  1. 要求1:点击跳转后背景色变为暗灰色,再次点击暗灰色变为白色
  2. 要求2:点击喜欢后变为喜欢字体变为红色,再次点击字体颜色变为黑色
  3. 要求3:左滑列表行出现删除**和**取消**两个按钮,点击删除后列表消失**

应对DOM操作、UI布局、样式的数据组合

如果在上述列表中,我们举一个简单的例子,我们需要点击后改变每个列表行的背景色。我们就需要在这个过程中添加一些绑定信息在原始数据中。

我们摘取一篇文章数据作为说明

    {
        title:"文章1",
        brief:"文章1的简介",
        time:"2016-07-12",
        image:"http://atth.eduu.com/album/201203/12/1475134_1331559643qMzc.jpg"
      },

我建议在绑定DOM操作的数据模式,我建议添加style属性,即组装成为以下数据格式,并采用驼峰命名还原本身css的属性名称,调用的时候容易辨识

    {
        title:"文章1",
        brief:"文章1的简介",
        time:"2016-07-12",
        image:"http://atth.eduu.com/album/201203/12/1475134_1331559643qMzc.jpg",
        style:{
           backgroundColor: #efefef;
           likeColor: red;
           ........
        }
      },

应对独立信息的数据添加组合

实际场景下,我们希望能够计算出我们图片的自适应长宽,并且将其绑定回显示的试图中。我们就建立单独的信息数据进行绑定.

小扩展:想一下,如果我们还希望我们的图片能够点击后多张预览如何处理

我们继续按照上述的数据来添加我们容易辨识的属性

    {
        title:"文章1",
        brief:"文章1的简介",
        time:"2016-07-12",
        image:"http://atth.eduu.com/album/201203/12/1475134_1331559643qMzc.jpg",
        style:{
           backgroundColor: #efefef,
           likeColor: red,
           ........
        }
        imageInfo:{
           width:320,
           height:400,
           .....
        }
      },

记住回填你的数据

回填你的数据就是在你动态改变完成你的数据组合以后,还要使用setData来重新绑定你的数据才能够在页面生效

举一个小列子

var that = this
    var temList = that.data.articleList
    var idx = e.currentTarget.dataset.id
    var style = temList[idx].style
    style = typeof(style) == 'undefined' ? {} : style
    style.likColor="color: red;"
    temList[idx].style = style
    that.setData({
      articleList:temList
    });

归纳

在这个场景下,可能遇到的情况比较简单,但是在复杂情况下,比如富文本操作等类似操作下,如果不按照一定的有序编码来,会需要很多麻烦

  1. 在做数据组合时,要注意命名和功能规划。
  2. 保证在浅层次下做你的数据组合(这一点下一篇会讲到)
  3. 不要随意组合你的数据,要不然在后期维护中你会很尴尬

预告

微信小城数据操作处理下:深度操作数据,看下如何微信小程序下深度操作和绑定数据
在微信小程序的操作体系里,你不会知道下一秒你对数据操作有多深!

延伸阅读