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

在本文中,苏南大叔主要描述设置页面数据变量,及如何使用数据变量。在定义数据以及数据使用这个方面,百度智能小程序(或者说微信小程序)的处理方式,和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