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

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

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

一、创建阿里云账号:
clipboard

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

clipboard2
clipboard3
clipboard4

三、创建物模型信息,一个温度,一个湿度

clipboard5

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

四、小程序的编写
4.1、创建登入页面,输入在阿里云平台生成的三元组信息,点击登入跳转的显示界面:

clipboard6

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

示例代码1


<view class="weui-flex__item">
  <view class="placeholder">--{{perTemp}} ℃--</view>
</view>
<view class="weui-flex__item">
  <view class="placeholder">--{{perHdmi}} %RH--</view>
</view>


4.3、为了模拟温度和湿度的上报,小程序里模拟了两个变量对平台进行上报

示例代码2

device.postProps({

        CurrentTemp: currenttemp,
        CurrentHimd: currenthdmi
      }, (res) => {
        console.log(`postProps:`, res);</p>

4.4、最后将温度和湿度显示在曲线图上进行显示

示例代码3

//初始化图表
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;

},

clipboard7

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

clipboard8

这是作者自己实实在在做出来的,就希望和感兴趣的一起交流学习,不喜勿喷,如果有感兴趣的可以关注微信公众号——物联网人家,获取完整的代码

__20190903154206

相关实践学习
阿里云AIoT物联网开发实战
本课程将由物联网专家带你熟悉阿里云AIoT物联网领域全套云产品,7天轻松搭建基于Arduino的端到端物联网场景应用。 开始学习前,请先开通下方两个云产品,让学习更流畅: IoT物联网平台:https://iot.console.aliyun.com/ LinkWAN物联网络管理平台:https://linkwan.console.aliyun.com/service-open
相关文章
|
物联网
通过微信小程序体验阿里云IoT物联网平台
通过微信小程序体验阿里云IoT物联网平台
9690 0
|
存储 消息中间件 负载均衡
深入理解RocketMQ广播消费
这篇文章我们聊聊广播消费,因为广播消费在某些场景下真的有奇效。笔者会从基础概念、实现机制、实战案例、注意事项四个方面一一展开,希望能帮助到大家。
深入理解RocketMQ广播消费
|
小程序 数据安全/隐私保护
吐血整理的几十款小程序登陆界面【附完整代码】(一)
吐血整理的几十款小程序登陆界面【附完整代码】
12273 1
吐血整理的几十款小程序登陆界面【附完整代码】(一)
|
存储 Oracle 关系型数据库
Oracle和MySQL有哪些区别?从基本特性、技术选型、字段类型、事务、语句等角度详细对比Oracle和MySQL
从基本特性、技术选型、字段类型、事务提交方式、SQL语句、分页方法等方面对比Oracle和MySQL的区别。
2029 18
Oracle和MySQL有哪些区别?从基本特性、技术选型、字段类型、事务、语句等角度详细对比Oracle和MySQL
|
编解码 自然语言处理 机器人
通义千问Qwen2-VL开源,API可直接调用!
通义千问宣布开源第二代视觉语言模型Qwen2-VL,并推出2B、7B两个尺寸及其量化版本模型。同时,旗舰模型Qwen2-VL-72B的API已上线阿里云百炼平台,用户可直接调用。
6107 10
|
12月前
|
存储 Java 开发者
丸辣!BigDecimal又踩坑了
【10月更文挑战第13天】本文介绍了在Java中使用BigDecimal进行高精度计算时容易遇到的几个坑,并给出了相应的解决方案。文章通过具体的示例详细讲解了BigDecimal在创建实例、toString方法、比较大小、运算以及计算价格时的常见问题和最佳实践。适合需要进行金融计算的开发者阅读。
|
机器学习/深度学习 人工智能 算法
深度学习在图像识别中的应用
【6月更文挑战第4天】本文将探讨深度学习技术在图像识别领域的应用。随着人工智能的不断发展,深度学习已经成为计算机视觉领域的重要工具。我们将介绍深度学习的基本原理和关键技术,并分析其在图像识别中的优势和挑战。通过具体案例,我们将展示深度学习如何提高图像识别的准确性和效率。
|
前端开发 算法 开发工具
如何将git的多个commit合成一个
如何将git的多个commit合成一个
964 0
|
小程序
微信小程序App()方法与getApp()方法
微信小程序App()方法与getApp()方法
525 0
微信小程序App()方法与getApp()方法
|
传感器 监控 数据可视化
IoT Studio 物联网可视化应用搭建开发实践
阿里云 IoT Studio 物联网可视化应用搭建开发实践
25202 4
IoT Studio 物联网可视化应用搭建开发实践