本次实验有两个物联网设备接入阿里云物联网平台,具体的数据转发流程如下所示:
- 温湿度传感器:设备上传数据→物联网平台接收→规则引擎转发→小程序接收到数据
- 台灯:小程序发送指令→物联网平台接收→规则引擎转发→台灯接收指令
其中,规则引擎的作用是进行数据的转发,要进行设备之间的通信,并不是直接进行点对点的通信,而是进行中间平台的转发,下图基本上解释了这个过程。

微信小程序进行温湿度传感器数值的接受与解析,同时具有上传控制台灯指令的功能,下面对小程序的开发进行详细介绍。
创建工程并导入第三方库
如上述的入门小程序开发所示,创建示例工程;在此基础上添加第三方库,才能进行mqtt的数据转发。
然后将这两个放在工程目录里的utils下,如下图所示:

WXML界面设计
本实例实现需要输入框用于输入用户三元组,文本信息的显示以及用户的操作(设备上线、设备下线、开灯、关灯),所以在index.json中添加本次实例构建所需要的组件依赖:
1 2 3 4 5 6 7 8 9
| "usingComponents":{ "van-field":"@vant/weapp/dist/field/index", "van-divider":"@vant/weapp/dist/divider/index", "van-slider":"@vant/weapp/dist/slider/index", "van-icon":"@vant/weapp/dist/icon/index", "van-button":"@vant/weapp/dist/button/index", "van-row":"@vant/weapp/dist/row/index", "van-col":"@vant/weapp/dist/col/index" }
|
添加三个输入框用于填写设备的三元组信息,其wxml代码如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <van-cell-group> <van-field model:value="{{productKey}}" label="productKey:" /> <van-field model:value="{{deviceName}}" label="deviceName:" /> <van-field model:value="{{deviceSecret}}" label="deviceSecret:" /> </van-cell-group>
|
其在小程序中显示效果如图下所示:

添加Slider滑块用于显示当前的温湿度信息,同时设置disable防止误触修改获取到的信息,其wxml代码如下所示:
1 2 3 4 5 6 7 8 9 10 11 12
| <view>湿度:</view> <van-slider value="{{shidu}}" use-button-slot disabled> <view class="custom-button" slot="button"> {{shidu}}% </view> </van-slider> <view>温度:</view> <van-slider value="{{wendu}}" use-button-slot disabled bar-height="4px" active-color="#ee0a24"> <view class="custom-button" slot="button"> {{wendu}}°C </view> </van-slider>
|
温度、湿度为0时无显示效果,所以将初始值设为50,其效果如下图所示:

接下来设置四个按钮,用于设备上线、设备下线、开灯、关灯;其wxml代码如下所示
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <van-row> <van-col span="5" offset="1"> <van-button type="primary" bind:click="turn_on">开灯</van-button> </van-col> <van-col span="6"> <van-button type="info" bind:click="online">设备上线</van-button> </van-col> <van-col span="6"> <van-buttontype="danger" bind:click="offline">设备下线</van-button> </van-col> <van-col span="5" offset="1"> <van-button type="warning" bind:click="turn_off">关灯</van-button> </van-col> </van-row>
|
其显示效果如图下所示:

JS功能实现
定义全局变量,导入工具类,设置设备三元组信息(将*替换为自己的)
1 2 3 4 5 6 7 8 9
| var client; var mqtt=require('../../utils/mqtt.min.js'); const crypto=require('../../utils/hex_hmac_sha1.js'); const deviceConfig={ productKey:"**********", deviceName:" **********", deviceSecret:"**********", regionId:" **********" };
|
设置data,用于与前端页面交互,共设置6个参数。“productKey”、“deviceName”、“deviceSecret”直接初始化定义为“deviceConfig”内的属性,也可以通过客户端输入修改;“wendu”、“shidu”两个个字段分别代表温度、湿度数值;其具体代码如下:
1 2 3 4 5 6 7
| data:{ productKey:deviceConfig.productKey, deviceName:deviceConfig.deviceName, deviceSecret:deviceConfig.deviceSecret, wendu:50, shidu:50, },
|
对基本的参数定义后,实现mqtt协议的基础工具类:
IoT平台mqtt连接参数初始化
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| initMqttOptions(deviceConfig){ const params={ productKey:deviceConfig.productKey, deviceName:deviceConfig.deviceName, timestamp:Date.now(), clientId:Math.random().toString(36).substr(2), }
const options={ keepalive:60, clean:true, protocolVersion:4 }
options.password=this.signHmacSha1(params, deviceConfig.deviceSecret); options.clientId=`${params.clientId}|securemode=2,signmethod=hmacsha1,timestamp=${params.timestamp}|`; options.username=`${params.deviceName}&${params.productKey}`; return options; },
|
生成基于HmacSha1的password,参考文档:https://help.aliyun.com/document_detail/73742.html
1 2 3 4 5 6 7 8 9 10 11
| signHmacSha1(params,deviceSecret){ let keys=Object.keys(params).sort();
Keys=keys.sort(); const list=[]; keys.map((key)=>{ list.push(`${key}${params[key]}`); }); const contentStr=list.join(''); return crypto.hex_hmac_sha1(deviceSecret,contentStr); }
|
最后实现对按钮的绑定功能事件的实现:
设备上线:对设备三元组信息进行初始化,使用三元组连接阿里云,并通过“client.on()”进行监听,将获取到的温湿度数值绑定“wendu”、“shidu”变量,最后在小程序中显示,其实现代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| online:function(){ varthat=this; const options=this.initMqttOptions(deviceConfig);
client=mqtt.connect('wxs://'+deviceConfig.productKey+'.iot-as-mqtt.cn-shanghai.aliyuncs.com',options) client.on('connect',function(){ console.log('连接服务器成功')
client.subscribe('/sys/'+`${deviceConfig.productKey}`+'/'+`${deviceConfig.deviceName}`+'/thing/service/property/set',function(err){ if(!err){ console.log('订阅成功!'); } }) })
client.on('message',function(topic,message){ message=message.toString() message=JSON.parse(message)
console.log(message) that.setData({ wendu:message['items']['temp']['value'], shidu:message['items']['hum']['value'] }) }) },
|
设备下线:将“client”连接关闭,并将“wendu”、“shidu”的值初始化为0
1 2 3 4 5 6 7 8 9
| offline:function(){
client.end() this.setData({ wendu:0, shidu:0, }) console.log('设备断开连接') },
|
开灯:定义发布链接,设置“Lightswitch”字段为1,通过发布函数将信息提交给阿里云
1 2 3 4 5 6 7 8 9 10 11
| turn_on:function(){ let topics='/sys/'+deviceConfig.productKey+'/'+deviceConfig.deviceName+'/thing/event/property/post'; const payloadJson={ id:Date.now(), params:{ "Lightswitch":"1" }, method:"thing.event.property.post" } client.publish(topics,JSON.stringify(payloadJson)) },
|
关灯:与开灯基本没有区别,将“Lightswitch”字段设置为0即可
1 2 3 4 5 6 7 8 9 10 11
| turn_off:function(){ let topics='/sys/'+deviceConfig.productKey+'/'+deviceConfig.deviceName+'/thing/event/property/post'; const payloadJson={ id:Date.now(), params:{ "Lightswitch":"0" }, method:"thing.event.property.post" } client.publish(topics,JSON.stringify(payloadJson)) },
|
实验整体流程
在阿里云物联网平台添加三个设备(台灯、温湿度传感器、微信小程序),设置规则引擎(用于信息流转),将设备开启连接上云,同时微信小程序开启设备实现数据的监听,一段时间后收到云上的数据,在页面显示温湿度数值;同时可以点击开灯、关灯按钮实现对于台灯的控制
