微信小程序1分钟轻松上云

导言：物联网产品不断的落地，物联网人才需求也越来越多，物联网门槛虽然不高，但是这个行业涉及的技术却很多，一个人不能掌握所有的技术，所以需要大家一起来共同创建物联网家园。
一、创建阿里云账号

二、创建产品和设备
在阿里云物联网管理平台上创建自己的设备，产品和设备创建完之后会生成设备所需要的三元组：product_key、device_name以及device_secrete，请保存这三个元素，因为在接下来的微信小程序中会用到。

三、创建物模型信息
我们需要在物联网平台上创建两个物模型：一个温度一个湿度，产品标识必须和代码里保持一致

本文的重点是如何在小程序上实现数据的上报
四、小程序的编写

4.1、创建登入页面，输入在阿里云平台生成的三元组信息，点击登入跳转的显示界面：

4.2、创建显示界面，最上面是灯泡：当平均温度超过60℃时，灯会亮起，当平均温度低于60摄氏度时，灯会熄灭，中间是平均温度和平均湿度。

向滑动查看全部

[/code][code]

复制代码

--{{perTemp}} ℃--

复制代码

--{{perHdmi}} %RH--

复制代码

[/code]
[b]4.3、为了模拟温度和湿度的上报，小程序里模拟了两个变量对平台进行上报[/b]
向滑动查看全部
[list][*][*][*][*][*][*][/list][code]device.postProps({

复制代码

CurrentTemp: currenttemp,

复制代码

CurrentHimd: currenthdmi

复制代码

}, (res) => {

复制代码

console.log(`postProps:`, res);

复制代码

});

复制代码

4.4、最后将温度和湿度显示在曲线图上进行显示
向滑动查看全部

//初始化图表

复制代码

init_echarts: function() {

复制代码

this.echartsComponnet.init((canvas, width, height) => {

复制代码

// 初始化图表

复制代码

Chart = echarts.init(canvas, null, {

复制代码

width: width,

复制代码

height: height

复制代码

});

复制代码

// Chart.setOption(this.getOption());

复制代码

this.setOption(Chart);

复制代码

canvas.setChart(Chart);

复制代码

// 注意这里一定要返回 chart 实例，否则会影响事件处理等

复制代码

return Chart;

复制代码

});

复制代码

},

复制代码

setOption: function(Chart) {

复制代码

//Chart.clear(); // 清除

复制代码

Chart.setOption(this.getOption()); //获取新数据

复制代码

},

复制代码

getOption: function() {

复制代码

// 指定图表的配置项和数据

复制代码

var option = {

复制代码

xAxis: {

复制代码

data: timeList,

复制代码

},

复制代码

yAxis: {

复制代码

},

复制代码

series: [{

复制代码

name: '温度',

复制代码

data: tempList,

复制代码

type: 'line'

复制代码

},

复制代码

{

复制代码

name: '湿度',

复制代码

data: hdmiList,

复制代码

type: 'line'

复制代码

}

复制代码

]

复制代码

}

复制代码

return option;

复制代码

},

复制代码

4.5、最后我们可以在云平台的运行状态下看到温度和湿度的显示

这是作者自己实实在在做出来的，就希望和感兴趣的一起交流学习，不喜勿喷，如果有感兴趣的可以底下留言获取源码链接。
END

扫码关注
星标本公众号
不错过任何消息哦

物联网人家
未来已来，万物必将物联，生活必将改变