1. 前言

在上一章里，我们成功让单片机与esp8266连接了onenet mqtt服务器，还发送了温湿度数据，并且能够接收来自OneNET平台发来的控制命令，比如开关灯。
这一章，我们将前面手动在OneNET的API调试页面进行的数据下发，改为在微信小程序中执行，并且在微信小程序中可视化显示我们上传的温湿度数据，实现一个完整的物联网项目。

2. 获取资料

扫描下方二维码加入嵌入式技术交流群，即可获取源码压缩包，群内有更多相关资料，并同步答疑驱动开发、移植问题及后续版本更新，同时有更多嵌入式问题也欢迎讨论～ :181-921-938

3. 获取API安全鉴权

https://iot.10086.cn/doc/aiot/fuse/detail/1464

文档描述：平台需要对API调用方进行资源权限校验，使用API时，需要在请求Header中携带统一的安全鉴权信息。

这里我们微信小程序需要调用OneNET的API，所以需要这个安全鉴权信息，还是使用之前的Token生成工具，不过里面的参数需要改变一下。

我们需要获取下方的这些数据：

3.1. 获取userid

①：在：“平台概览”中。

②：复制头像旁边的“id”信息，这就是我们的userid。

将userid记录到记事本中。

3.2. 获取截止时间戳

还是和前面用的工具一样：时间戳(Unix timestamp)转换工具

①：修改时间为一年后，最大不能大于10年。

②：点击转换。

③：注意要选择单位“秒”。

将生成后的时间戳保存到记事本中。

3.3. 获取AccessKey

①：鼠标放在头像的位置。

②：点击访问权限。

①：点击查看，获取手机验证码，然后将内容保存到记事本中。

注意：这里查看AccessKey存在bug！我使用的是edge浏览器，输入完验证码后按下回车按键，查看页面会消失，可以重新输入刚刚的验证码，不按回车，用鼠标点击确定即可

3.4. token生成工具

还是使用我们前面下载的工具生成token：

按照这个格式填入

res:userid/{你的userid}
et:{前面获取的时间戳}
key:{你的AccessKey}
method:md5	version:2022-05-01

注意version与之前有变化

填入如下图所示，然后点击生成

将生成的token内容保存到记事本中。

4. 适配微信小程序源码

获取到了token 鉴权信息后，我们就可以来适配微信小程序实现我们的功能了。

4.1. 下载开发软件

开发微信小程序需要用到软件：微信开发者工具

下载地址：微信开放文档

选择合适的版本下载，安装简单，可中文路径：

4.2. 导入工程

安装完成后打开软件，点击右上角的导入工程：

将 资料中的微信小程序源码文件夹直接导入即可：

4.3. 获取并修改appid

这里获取一下自己的appid

登陆微信开发者平台，在开发管理中：小程序

可以获取微信小程序AppID，如果之前没有使用过微信小程序，可以按照官方指示流程创建。

然后修改自己的appid：

①：点击选项。

②：修改appid为自己的信息，后续才可以在手机上调试。

4.4. 修改代码信息

4.4.1. onenet基础信息

①：找到 index.js 文件

②：修改这里的信息，为自己的内容：

const CONFIG = {
  AUTH_INFO: "version=2022-05-01&res=userid%2F341108&et=1798968116&method=md5&sign=g432Wx47eq6J2IPVmYjiIQ%3D%3D", //鉴权信息（前面生成的token)
  PRODUCT_ID: "E09M9yRDI0", //产品id
  DEVICE_NAME: "dev-001", //设备名称
  API_BASE_URL: "https://iot-api.heclouds.com", //API基础地址
  DATA_REFRESH_INTERVAL: 5000,  //数据获取周期（建议和单片机上报数据周期一致）
  STATUS_QUERY_LIMIT: 1,  //获取多少条设备信息（建议1条）
  STATUS_QUERY_RANGE_MS: 7 * 24 * 60 * 60 * 1000, // 一周的毫秒数（获取设备信息的时间范围，当前时间往前一周）
};

4.4.2. onenet 中设备信息

①：还是在 index.js 文件

②：修改这里的数据，为自己的设备属性数据，每个属性具体内容需要和onenet中的信息一致，

例如我们返回到onenet的产品开发页面中，对比上图，标识符，数据类型需要一致，初始值为0即可。

4.4.3. 修改wxml中组件绑定的数值

①：在 index.wxml 文件中

②：这里为例，如果需要显示平台的数据：{{deviceValueMap.CurrentHumidity}}

后面的：CurrentHumidity，需要和平台的标识符一致，程序中自动识别对应的数值

5. 微信小程序调试

5.1. 数据获取

修改完上面的信息后，看看下方的Console区域，有没有打印获取的数据，如果没有，可以查看对应的报错信息

举例，例如我的鉴权信息错误，去掉了开头第一个字符：

通过打印信息和屏幕显示内容，都可以看到是鉴权信息错误，重新核对一下信息或者重新生成一下鉴权信息再尝试，其他错误同理。

5.2. 执行下发

需要单片机成功连接OneNET MQTT服务器，订阅属性设置主题，然后才可以在小程序中控制LED灯，继电器等内容。

如果设备不在线时，是无法进行属性设置的，例如这里打开LED1开关（开关下一次获取数据时会恢复）：

再例如设备在线，小程序发送指令，显示：设备响应超时，说明单片机没有接收到数据，或者没有成功响应数据，

这样就要检查一下单片机的运行了：

6. 添加组件

如果我们自己还有其他的控制模块，或者数据显示内容，可以自行在index.wxml文件中添加，

以湿度为例，可以复制一份源码：

    <!-- 数据项：当前湿度 -->
    <view class="data-item CurrentHumidity">
      <image src="/图片/CurrentHumidity.png" class="data-picture"/>
      <view class="data-text">
        <view class="data-title">当前湿度</view>
        <view class="data-value">{{deviceValueMap.CurrentHumidity}}℃</view>
      </view>
    </view>

然后将里面关键字：CurrentHumidity，改为新的内容即可，确保view嵌套层数正确，这里发给AI修改更方便。

这里演示新增：当前状态 status

    <!-- 数据项：当前状态 -->
    <view class="data-item status">
      <image src="/图片/CurrentHumidity.png" class="data-picture"/>
      <view class="data-text">
        <view class="data-title">当前状态</view>
        <view class="data-value">{{deviceValueMap.status}}℃</view>
      </view>
    </view>

效果如下：

①：复制了一份新的显示内容。

②：可以看到显示了一个新的组件，但是数值因为没有标识符，所以没显示内容。

其他的开关，滑条，之类的都是同理。

7. 手机预览调试

内容都修改并验证成功后，可以在手机上预览我们刚刚开发的微信小程序：

①：预览模式，选择小程序运行。

②：手机微信扫码，进入小程序。

打开了微信小程序后，由于我们没有发布，处于调试阶段，需要将小程序打开调试模式：

点击 右上角的三个点选项，找到开发调试

然后打开调试，重启微信小程序即可

之后我们在手机上也能显示数据，并且可以控制LED，继电器等内容了

8. 获取设备在线情况

8.1. API说明

8.1.1. 请求信息

返回到OneNET的API调试面板中，我们获取设备在线情况的API，

找到：设备状态变更历史记录 选项

①：这里是API地址，请求方式是：GET，下方是请求的参数说明。

②：有些参数不是必选的，按照需求来选择。

③：这里必填产品id和设备名称。

④：这里是选择某一段时间内的设备信息，后续默认截止时间是当前时间，起始时间是当前时间-7天

⑤：这里只请求一条数据，就是最新的一次数据。

8.1.2. 获取有效数据

data.list[0].status

设备状态，0-离线，1-在线，2-未激活

这里我们请求后，只需要这一个字段的数据就可以判断设备是否在线了。

8.1.3. 请求方法

GET https://iot-api.heclouds.com/device/status-history?imei=1234512345&start_time=1592398420000&end_time=1592398421297

对应我们的微信小程序代码中：

    const url = `${CONFIG.API_BASE_URL}/device/status-history?product_id=${CONFIG.PRODUCT_ID}&device_name=${CONFIG.DEVICE_NAME}&start_time=${start_time}&end_time=${end_time}&limit=${CONFIG.STATUS_QUERY_LIMIT}`;

这里也是相当于上面文档中的请求示例，写入请求字段，然后替换自己的信息，最后执行GET

     const res = await this.wxRequest({ url, method: 'GET' });

这里执行自己封装的方法，前面

  wxRequest(options) {
    return new Promise((resolve, reject) => {
      wx.request({
        ...options,
        header: {
          'Authorization': CONFIG.AUTH_INFO,
          'content-type': 'application/json',
          ...options.header, // 允许覆盖默认header
        },
        success: (res) => resolve(res),
        fail: (err) => reject(err)
      });
    });
  },

所以如果还需要在微信小程序中调用什么API或者其他的功能，都可以参考这个调用方式，照葫芦画瓢，模仿出来。

8.2. API调试结果

执行成功后，可以看到"status": 1,这里字段信息是1，说明刚刚设置的时间范围内，设备最后一次状态是在线。

如果你们的信息没有"status"字段，说明在那一段时间范围内，设备状态没有改变过，可以延长初始时间戳

9. 总结

经过这几节内容，我们实现了一套完整的物联网开发流程，本节完成微信小程序适配，让整个物联网系统落地为可实操的终端应用。我们先获取 OneNET API 安全鉴权信息，调试验证设备状态、属性获取与设置的核心 API，再适配微信小程序源码，修改基础配置与 OneNET 相关参数，完成页面组件数据绑定，最后调试小程序并实现手机预览，成功打通硬件采集、云端传输、小程序可视化与远程控制的全链路，形成完整的物联网应用闭环。