[小程序开发]连接阿里云

本次实验有两个物联网设备接入阿里云物联网平台,具体的数据转发流程如下所示:

  • 温湿度传感器:设备上传数据→物联网平台接收→规则引擎转发→小程序接收到数据
  • 台灯:小程序发送指令→物联网平台接收→规则引擎转发→台灯接收指令

其中,规则引擎的作用是进行数据的转发,要进行设备之间的通信,并不是直接进行点对点的通信,而是进行中间平台的转发,下图基本上解释了这个过程。

规则引擎转发流程

微信小程序进行温湿度传感器数值的接受与解析,同时具有上传控制台灯指令的功能,下面对小程序的开发进行详细介绍。

1. 创建工程并导入第三方库

如上述的入门小程序开发所示,创建示例工程;在此基础上添加第三方库,才能进行mqtt的数据转发。

然后将这两个放在工程目录里的utils下

2. WXML界面设计

本实例实现需要输入框用于输入用户三元组,文本信息的显示以及用户的操作(设备上线、设备下线、开灯、关灯),所以在index.json中添加本次实例构建所需要的组件依赖:

"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代码如下所示:

<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代码如下所示:

<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>

接下来设置四个按钮,用于设备上线、设备下线、开灯、关灯;其wxml代码如下所示:

<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>

3. JS功能实现

定义全局变量,导入工具类,设置设备三元组信息(将*替换为自己的):

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”两个个字段分别代表温度、湿度数值;其具体代码如下:

data:{
productKey:deviceConfig.productKey,
deviceName:deviceConfig.deviceName,
deviceSecret:deviceConfig.deviceSecret,
wendu:50,
shidu:50,
},

对基本的参数定义后,实现mqtt协议的基础工具类:

IoT平台mqtt连接参数初始化

initMqttOptions(deviceConfig){
const params={
productKey:deviceConfig.productKey,
deviceName:deviceConfig.deviceName,
timestamp:Date.now(),
clientId:Math.random().toString(36).substr(2),
}
//CONNECT参数
const options={
keepalive:60,         //60s
clean:true,           //cleanSession不保持持久会话
protocolVersion:4   //MQTTv3.1.1
}
//1.生成clientId,username,password
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

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”变量,最后在小程序中显示,其实现代码如下:

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('连接服务器成功')
//订阅主题(这里的主题可能会不一样,具体请查看后台设备Topic列表或使用自定义主题)
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)
//将接收到的字符串进行Json格式转换
console.log(message)
that.setData({
wendu:message['items']['temp']['value'],
shidu:message['items']['hum']['value']
})
})
},

设备下线:将“client”连接关闭,并将“wendu”、“shidu”的值初始化为0

offline:function(){
//client连接断开,关闭连接
client.end()
this.setData({
wendu:0,
shidu:0,
})
console.log('设备断开连接')
},

开灯:定义发布链接,设置“Lightswitch”字段为1,通过发布函数将信息提交给阿里云

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即可

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))
},

最后实现的界面效果如下所示:

 微信小程序实时页面






文件名称:小程序连接阿里云实例

更新日期:2021-03-31

作者信息:1375451299

提示:下载后请查看是否有问题,可以联系本作者!

下载地址:附件1下载 【文件大小:199kb】

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇