我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

在本文中，苏南大叔主要描述设置页面数据变量，及如何使用数据变量。在定义数据以及数据使用这个方面，百度智能小程序（或者说微信小程序）的处理方式，和react是非常类似的。如果大家学习过react的话，在这里对数据的处理就会非常容易上手。

苏南大叔：百度智能小程序，如何设置及使用数据data？ - smartapp-data
百度智能小程序，如何设置及使用数据data？（图1-1）

本文测试环境：mac/百度开发者工具@2.4.3。

定义数据

<page>.js:

Page({
    data: {
        "str":"test",
        "arr":[
            {
                mode: 'scaleToFill'
            },
            {
                mode: 'widthFix'
            },
        ],
        num: 0,
        obj: {
           text: 'init data'
        }
    },
    //...
});

修改数据

<page>.js:

this.setData({
   str: 'changed data'
});
this.setData({
  num: 1
});

特殊的setData方式：

// 对于对象或数组字段，可以直接修改一个子字段，这样方式会有带来更好的性能
this.setData({
  'arr[0].mode':'changed data'
});
this.setData({
  'obj.text': 'changed data'
});
this.setData({
  'newField.text': 'new data'
});

这个this.setData要注意的地方有：

  • 选个合适的时机，比如onLoad，或者bind系列的某些事件。
  • 如果在ajax里面的success回调使用的话，还需要注意this.作用域的问题。

显示数据

{{text}}
{{num}}
{{arr[0].text}}
{{obj.text}}
{{newField.text}}

循环数据

<view s-for="item in arr">
  {{item.mode}}
</view>

相关文章

总结

在小程序开发过程中，设置及使用数据data，是非常常见的操作。更多智能小程序的经验文章，请参见苏南大叔的博客：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   百度    smartapp