#微信小程序创建(获取onenet平台数据)

news2025/1/21 18:52:00

1.IDE:微信开发者工具


2.实验:创建一个小程序(http get获取onenet平台数据)


3.记录:

百度网盘链接:https://pan.baidu.com/s/1eOd-2EnilnhPWoGUMj0fzw 提取码: 2023 

(1)新建一个工程

(2)工程选项

 (3)本次要调用onenet平台的数据,所以要登录微信公众平台去设置合法域名

 (4)设置完成查看

(5)获取一次数据

(6)最终效果

 


4.代码

只修改了index.js和index.wxml和index.wxss

index.js

Page({
  data: {
     ppm:0
    },
 //事件处理函数
 getinfo(){            //javascript中函数与函数之间需要用逗号隔开
   var that =this
wx.request({
  url: "https://api.heclouds.com/devices/1105985351/datapoints",
  header:{
    "api-key": "AdbrV5kCRsKsRCfjboYOCVcF9FY="                      //自己的apikey
  },
  method: "GET",
  success: function(e){    //获取成功将所有数据传入e
    console.log("获取成功",e)  //控制台打印获取回来的数值
    that.setData({
      ppm:e.data.data.datastreams[0].datapoints[0].value
    })
    console.log("ppm=",that.data.ppm)  //打印从json返回数据中解码出来的数据ppm
  }
})
 },
 onLoad(){             //相当于主函数
   var that =this
   setInterval(function(){
    that.getinfo()   //获取一次数据
   },3000)    //3s执行一次
   
 }
 })

index.wxml

<text class="data_info">{{ppm}}</text>
<text style="position: fixed;left: 100px;top: 40px;">可燃气体:</text>
<text style="position: fixed;left: 210px;top: 40px;">ppm</text>
<image class="picture_setting" src="../imag/gas.png"></image>

index.wxss


/* 数据信息样式 */
.data_info{            
  color: red;
  position: fixed; /*固定定位*/
  left: 180px;    /*距离左边100px*/
  top: 40px;
  background-color: yellow;
}
/* 图片信息样式 */
.picture_setting{
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100px;
  width: 100px;
}

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1495718.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CentOS/Fedora/Ubuntu/Debian 系统 wget 命令

wget 是云服务器安装环境和面板常用下载命令。下载软件或从远程服务器下载备份到本地服务器&#xff0c;也可以使用 wget 把文件下载到云服务器上。 VPS wget 命令最常用使用方法如下&#xff1a; 安装 wget 一般来说 wget 命令是系统自带的&#xff0c;方面安装环境和面板&…

LVS----DR模式

一、LVS-DR工作原理 1、LVS-DR数据包流向分析 客户端发送请求到Director Server (负载均衡器)&#xff0c;请求的数据报文&#xff08;源IP是CIP&#xff0c;目标IP是VIP&#xff09;到达内核空间。Director Server 和Real Server 在同一个网络中&#xff0c;数据通过二层数据…

guava的使用

对数组操作前判断是否会越界&#xff1a; List<String> s new ArrayList<>();System.out.println(Preconditions.checkElementIndex(2,s.size(),"下标长度超过了")); 是否为空 String s null;System.out.println(Preconditions.checkNotNull(s)); 判空…

六自由度Stewart平台的matlab模拟与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1运动学原理 4.2 Stewart平台运动学方程 5.完整工程文件 1.课题概述 六自由度Stewart平台的matlab模拟与仿真&#xff0c;模拟六自由度Stewart平台的动态变化情况以及伺服角度。 2.系统仿真结果 3.核…

设置word目录从正文开始记录页码,并解决word目录正常,但正文页脚处只显示第一页的页码

设置word目录从正文开始记录页码&#xff0c;并解决word目录正常&#xff0c;但正文页脚处只显示第一页的页码 问题详情1&#xff1a;如何设置目录从正文开始记录页码 问题详情2&#xff1a;word目录处的页码正常&#xff0c;但正文只有第一页的页脚处显示页码 解决方法 在设置…

SpringCloud微服务-RabbitMQ快速入门

文章目录 RabbitMQ快速入门1、什么是MQ&#xff1f;2、RabbitMQ概述3、RabbitMQ的结构和概念4、常见消息模型5、HelloWorld RabbitMQ快速入门 1、什么是MQ&#xff1f; MQ &#xff08;MessageQueue&#xff09;&#xff0c;中文是消息队列&#xff0c;字面来看就是存放消息的…

【❤️算法笔记❤️】-每日一刷-21、合并两个有序链表

文章目录 题目思路解答 题目 简单 相关标签 相关企业 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]示例 2&#xff1a; 输入…

蓝桥杯-排序

数组排序 Arrays.sort(int[] a) 这种形式是对一个数组的所有元素进行排序&#xff0c;并且时按从小到大的顺序。 package Work;import java.util.*;public class Imcomplete {public static void main(String args[]) {int arr[]new int [] {1,324,4,5,7,2};Arrays.sort(arr)…

【Java】CAP理论以及它的实际应用案例

目录 简介 不是所谓的“3 选 2” CAP 实际应用案例 总结 CAP 理论/定理起源于 2000年&#xff0c;由加州大学伯克利分校的Eric Brewer教授在分布式计算原理研讨会&#xff08;PODC&#xff09;上提出&#xff0c;因此 CAP定理又被称作 布鲁尔定理&#xff08;Brewer’s the…

JavaSE——基础小项目-模拟ATM系统(项目主要目标、技术选型、架构搭建、具体实现、完整代码注释)

目录 项目主要目标 技术选型 面向对象编程 使用集合容器 程序流程控制 使用常见API 系统架构搭建与欢迎页设计 Account ATM Test 用户开户功能实现 录入账户名称与性别 录入账户密码与取现额度 生成新卡号 存入账户 登录功能实现 登录后操作实现 退出账户 存…

JavaScript 入门手册(二)

目录 八、JavaScript 数据类型 8.1 动态类型 8.2 typeof 操作符 8.3 Undefined 和 Null 九、JavaScript 对象 9.1 创建对象 9.2 对象方法 十、作用域 十一、条件语句 十二、循环 12.1 for 循环 12.1.1 语句 1 12.1.2 语句 2 12.1.3 语句 3 12.2 for...in 循环 …

文本溢出隐藏 显示省略号,鼠标悬浮展示 el-tooltip(TooltipIsShowMixin封装)

目录 mixins 封装使用 TooltipIsShowMixin效果展示 mixins 封装 TooltipIsShowMixin.js export const TooltipIsShowMixin {data() {return {tooltipIsShow: false}},methods: {tooltipIsDisHandler(className) {this.$nextTick(() > {const dom document.querySelector…

语义化与自动化——第三代指标平台两大核心能力详解(内含QA)

【作者简介】杜雪芳&#xff0c;Aloudata 合伙人兼首席业务架构师。12 年数据业务从业经验&#xff0c;3 年管理咨询经验。历任阿里集团淘宝商业分析负责人、阿里音乐商业智能中心负责人、蚂蚁集团用户增长分析与洞察产品负责人。在数据体系搭建、数据分析、用户标签建设、用户…

混合动力汽车应用中的厚膜电阻器

电阻器在标准内燃机汽车的许多应用中都有发现。混合动力汽车中的电阻器在电池管理&#xff08;BMS&#xff09;和动态制动系统中也有其他应用。 混合动力汽车使用两种不同的能源来最大限度地提高效率。这通常意味着将存储在电池中的电能与内燃机&#xff08;AutoExpress&#x…

腾讯云4核8G12M轻量服务器优惠价格446元一年,646元15个月

腾讯云4核8G12M轻量服务器优惠价格446元一年&#xff0c;646元15个月&#xff0c;180GB SSD云硬盘&#xff0c;2000GB月流量。 一张表看懂腾讯云服务器租用优惠价格表&#xff0c;一目了然&#xff0c;腾讯云服务器分为轻量应用服务器和云服务器CVM&#xff0c;CPU内存配置从2核…

Mac 安装JDK,并通过命令切换不同版本jdk

mac电脑安装了jdk8、jdk11、jdk21 三个版本的jdk&#xff0c;在环境变量中配置命令&#xff0c;动态切换不同jdk 1.下载JDK&#xff0c;Mac建议下载xxxxx/jdk-21_macos-x64_bin.dmg https://download.oracle.com/java/21/latest/jdk-21_macos-x64_bin.dmg&#xff0c; 2.双击安…

图解目标检测的现代历史

任务分类 图像分类 根据图像的主要对象对图像进行分类。 目标定位 预测包含主要对象的图像区域。然后&#xff0c;可以使用图像分类来识别该区域内的物体 目标检测 定位和分类出现在图像中的所有对象。这个任务通常包括&#xff1a;确定区域&#xff0c;然后对其中的对象进行…

物联网技术在低压安全用电云平台的应用

前言&#xff1a;低压安全用电系统是保障用电质量的重要依托&#xff0c;也是增强用电安全性的根本依据。而在其中应用物联网技术&#xff0c;可进一步提升监测效率。在此之上&#xff0c;文章简要分析了低压安全用电系统的设计基准与监测内容&#xff0c;并通过科学制定系统建…

波奇学Linux:信号的发送和保存

信号的发送的对象是pcb task_struct{ int signal; //0000 0000 .... 0001 进程pcb中存在int型的signal来保存信号&#xff0c;用位图的方式&#xff0c;比特位的0&#xff0c;1表示是否收到信号 比特位位置表示信号的编号。 发信号的本质就是修改task_struct的信号位图对应的…

App Inventor 2 Personal Image Classifier (PIC) 拓展:自行训练AI图像识别模型,开发图像识别分类App

这里仅仅介绍一下AI图像识别App的实现原理&#xff0c;AI的基础技术细节不在本文讨论范围。通过拓展即可开发出一款完全自行训练AI模型&#xff0c;用于特定识别场景的App了。 我们都知道&#xff0c;人工智能AI的基本原理是事先准备好样本数据&#xff08;这里指的是图片&…