05-数据绑定

前言

上一节，我们学习了如何连接阿里云并订阅topic，但是WXML页面什么也没做，本节，我们使用数据绑定方式渲染数据，将结果实时显示在主页面上。

一、基础知识

数据绑定指的是WXML 中的动态数据均来自对应 Page 的 data。通过修改Page中的data，小程序就可以自动渲染到WXML中显示效果。

数据绑定常见的类型如下：

(1) 简单数据绑定

<view> {{ message }} </view>

Page中给message赋值，直接在WXML中使用{{ }}方式获取渲染

(2) 属性数据绑定

<view id="item-{{id}}"> </view>
<view wx:if="{{condition}}"> </view>

属性数据绑定应该放在" "之内处理

(3) 关键字数据绑定

<checkbox checked="{{false}}"> </checkbox>

注意false是关键字，不是Page中data定义的字段，false表示假，true表示真

二、实例

首先讲上一节的工程复制并修改名字为05-data_bind，编写index.wxml内容如下：

<!--index.wxml-->
<view class="container">
<view>服务器状态:{{status_server}}</view>
<view class="sub">订阅状态：{{status_topic}}</view>
<button class="btn_con" type="primary" bindtap="btn_connect"> 连接服务器</button>
</view>

status_server和status_topic在index.js文件中定义：

  data: {
    productKey : "a13RXPFSBnM",
    deviceName : "FrYSFbWJi9EYHhvEa9Ln",
    deviceSecret: "xurB5FPisXGXJ2veWUvjEDZN8K9so1SJ",
    regionId: "cn-shanghai",
    status_server: "未连接",
    status_topic: "未订阅"
  },

index.wxml中button按钮类型选择primary,bindtap指定回调函数btn_connect：

 btn_connect: function() {
    this.ConnectAliyunServer();
  },

  ConnectAliyunServer(){
    var that = this
    const deviceConfig = {
      productKey  : that.data.productKey,
      deviceName  : that.data.deviceName,
      deviceSecret: that.data.deviceSecret,
      regionId    : that.data.regionId
    };
    const options = that.initMqttOptions(deviceConfig);
    // 替换productKey为你自己的产品的
    const mqttClient = mqtt.connect('wxs://a13RXPFSBnM.iot-as-mqtt.cn-shanghai.aliyuncs.com',options);
    mqttClient.on('connect', function () {
      console.log('连接服务器成功')
      that.setData({
        status_server:"已连接"
      })
      //订阅主题，替换productKey和deviceName(这里的主题可能会不一样，具体请查看后台设备Topic列表或使用自定义主题)
      var topic = '/a13RXPFSBnM/FrYSFbWJi9EYHhvEa9Ln/user/get';
      mqttClient.subscribe(topic, function (err) {
        if (!err) {
           console.log('订阅成功！');
           that.setData({
            status_topic:"已订阅"
          })
        }
      })
     mqttClient.on('message', function (topic, message){
     console.log("接收信息：" + message.toString());
    })
    })
  },

注意:连接服务器和订阅成功，会调用setData函数修改数据值，会自动渲染到小程序前端页面

  that.setData({
    status_server:"已连接"
  })

三、运行

保存后，小程序界面刷新，如下所示：

点击连接服务器按钮，界面如下所示：

上图中页面渲染使用简单的数据绑定，关于数据绑定更多内容，将在后续章节用到。

四、结语

如您在使用过程中有任何问题，请加QQ群进一步交流。

QQ交流群：906015840 (备注：物联网项目交流)

源码获取：扫描下方二维码，关注公众号，回复wechat即可

一叶孤沙出品：一沙一世界，一叶一菩提