5分钟开发一个物联网小程序【IoT迷你赛】

jcdhlzq • 2023-01-02 • 云技术社区 • 414 阅读

前言

说起计算机领域当今科技方向“云大物移智”，听起来非常地高大上。今天小哥就花5分钟带领各位看官感受一下其中的“物联网”。

准备工作

1、手上一套智能楼宇套件

2、登录腾讯云物联网开发平台https://console.cloud.tencent.com/iotexplorer

3、新建一个项目“门窗告警Demo”，点击进入项目，新建产品“demo”，点击demo进入产品开发。

4、配置数据模板如下图所示：

8、点击新建设备，如下图所示，其中DevEUI扫描智慧楼宇套件中的设备后面的二维码获得，AppKey统一为2b7e151628aed2a6abf7158809cf4f3c。

9、点击设备进入调试页面，设置bound为1并发送。如下图所示：

注：AppID本地开发可以暂用测试号，或者从小程序管理后台信息中获取。

三、打开app.js，按照注释说明获取其中的productId，deviceName，secretId和secretKey的值，这里是小程序和物理设备通信的关键。

配置访问设备的信息

四、然后就是业务逻辑相关的开发，先看下最终的效果

最终效果

其中所有的实现均在pages/index目录下，如下图所示

业务逻辑代码目录

五、修改模板页面文件index.wxml，其中设备信息相关无需修改，只需修改表单controlDeviceData中的表单项的样式即可，代码如下：

  <form bindsubmit="controlDeviceData">
    <view style="display:flex; flex-direction:row; justify-content: space-between;">
      <view style="font-weight: bold;">
      <!-- 修改标题 -->
        防盗告警 Demo
      </view>
      <view>
        <button type="primary" size="mini" bindtap="queryDeviceData">查询</button>
        <button style="margin-left:20rpx" type="primary" size="mini" form-type="submit">发送</button>
      </view>
    </view>
    <view class="box">
      <view class="cell">
      <!-- 修改说明：绑定状态 -->
        <view>绑定</view>
        <view>
        <!-- 修改变量名称为deviceData.bound.Value -->
          <switch name="bound" checked="{{deviceData.bound.Value}}" />
        </view>
      </view>
      <view class="cell">
      <!-- 修改说明：开关状态 -->
        <view>开关状态</view>
        <view>
        <!-- 修改样式和文本 -->
          <span name="isOpen">{{deviceData.isOpen.Value==1? '开':'关'}}</span>
        </view>
      </view>
      <view class="cell">
      <!-- 修改说明：周期 -->
        <view>周期</view>
        <view>
        <!-- 修改样式和变量 -->
          <input name="period" type="number" confirm-type="done" style="width:60px; border:1px solid lightgray; border-radius:25px" value="{{deviceData.period.Value}}"/>
        </view>
      </view>
    </view>
  </form>

六、修改index.js的queryDeviceData方法，增加门窗打开时的手机震动提示

  queryDeviceData()
  { 
    let that = this
    wx.showLoading()

    // 实例化一个请求对象
    let req = new iotmodel.DescribeDeviceDataRequest();
    req.DeviceName = app.globalData.deviceName;
    req.ProductId = app.globalData.productId;

    // 通过client对象调用想要访问的接口，需要传入请求对象以及响应回调函数
    this.data.client.DescribeDeviceData(req, function (err, response) {
      if (err) {
        console.log("err:", err);
        wx.showToast({
          title: "查询失败 " + err,
          icon: 'none',
          duration: 3000
        })
        return;
      }
      wx.showToast({
        title: "查询成功",
        icon: 'none',
        duration: 1000
      })
      let deviceData = JSON.parse(response.Data)
      that.setData({
        deviceData: deviceData
      })
      console.log(that.data.deviceData);
      // 门窗打开时进行震动提示
      if(that.data.deviceData.isOpen) {
        wx.vibrateLong({
          complete: (res) => {console.log(res)},
        })
      }
    });
  },

七、修改index.js的controlDeviceData方法，正确读取周期设置

  controlDeviceData(e) {
    let that = this
    wx.showLoading()

    let data = e.detail.value
    // 这里不需要了，直接注释掉
    // if (data.period) {
    //   data.period = 1
    // } else {
    //   data. = 0
    // }
    console.log('form data：', e.detail.value)

    // 实例化一个请求对象
    let req = new iotmodel.ControlDeviceDataRequest();
    req.DeviceName = app.globalData.deviceName;
    req.ProductId = app.globalData.productId;
    req.Data = JSON.stringify(data);

    // 通过client对象调用想要访问的接口，需要传入请求对象以及响应回调函数
    this.data.client.ControlDeviceData(req, function (err, response) {
      if (err) {
        console.log(err);
        wx.showToast({
          title: "操作失败 " + err,
          icon: 'none',
          duration: 3000
        })
        return;
      }
      console.log(err)
      wx.showToast({
        title: "操作成功",
        icon: 'none',
        duration: 1000
      })
    });
  },

八、点击开发者工具右上角上传按钮即可上传到微信小程序开发者平台。

九、配置域名。在小程序管理后台进行服务器域名配置：进入微信公众平台小程序后台 - 开发 - 开发设置 - 服务器域名 - 输入域名如下两个域名之一，也可两个都添加。