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

news/2024/4/15 7:50:31

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){    //获取成功将所有数据传入econsole.log("获取成功",e)  //控制台打印获取回来的数值that.setData({ppm:e.data.data.datastreams[0].datapoints[0].value})console.log("ppm=",that.data.ppm)  //打印从json返回数据中解码出来的数据ppm}
})},onLoad(){             //相当于主函数var that =thissetInterval(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.ppmy.cn/news/1373732.html

相关文章

WPF 自定义彩色控制台功能

文章目录 前言环境流内容一个简单的控制台 自动添加数据无法添加数据模板代码添加参数简单的案例添加和清空功能完善代码 额外功能添加移动到底部添加样式 总结 前言 在WPF中添加模拟控制台&#xff0c;可以试试的看到最新的日志信息。但是普通的TextBlock只是纯粹的黑色&…

跟着cherno手搓游戏引擎【27】升级2DRenderer(添加旋转)

水节&#xff0c;添加了旋转的DrawQuad&#xff1a; Renderer2D.h: #pragma once #include "OrthographicCamera.h" #include"Texture.h" namespace YOTO {class Renderer2D{public://为什么渲染器是静态的&#xff1a;static void Init();static void …

CCF CSP 202006-4 1246 (100分详细题解,矩阵乘法+快速幂)

202006-4 1246 &#xff08;100分详细题解&#xff0c;矩阵乘法快速幂&#xff09; 可以先看下csp官方的思路讲解&#xff0c;大思路是状态转移&#xff0c;先看下面s<2的情况 1 -> 2 2 -> 4 4 -> 16 6 -> 6 64 4 16 -> 26&#xff08;不考虑2&#xff0c;6…

C语言从入门到精通 第八章(用函数实现模块化程序设计)

一、函数的定义 1、概述 &#xff08;1&#xff09;函数是一个可以独立完成某个功能的语句块&#xff0c;其主要作用是将复杂程序拆成若干易于实现的子程序。 &#xff08;2&#xff09;在C语言中&#xff0c;函数分为标准函数&#xff08;又称为预定义函数&#xff09;和用…

【计算机网络】IO多路转接之epoll

文章目录 一、epoll的相关系统调用二、epoll工作原理三、epoll的优点(和 select 的缺点对应)四、epoll工作方式五、epoll服务器1.Sock.hpp2.Log.hpp3.Err.hpp4.epollServer.hpp5.epollServer.cc 一、epoll的相关系统调用 按照man手册的说法: 是为处理大批量句柄而作了改进的po…

基于OpenCV的图形分析辨认04

目录 一、前言 二、实验目的 三、实验内容 四、实验过程 一、前言 编程语言&#xff1a;Python&#xff0c;编程软件&#xff1a;vscode或pycharm&#xff0c;必备的第三方库&#xff1a;OpenCV&#xff0c;numpy&#xff0c;matplotlib&#xff0c;os等等。 关于OpenCV&…

事务(transaction)

事务&#xff0c;什么是事务&#xff0c;事务就是由单独单元的一个或多个sql语句组成&#xff0c;在这个单元中&#xff0c;每个sql语句都是相互依赖的。而整个单独单元是作为一个不可分割的整体存在&#xff0c;类似于物理当中的原子&#xff08;一种不可分割的最小单位&#…

Node.js和浏览器在JavaScript运行环境方面存在一些区别和联系

Node.js和浏览器在JavaScript运行环境方面确实存在一些区别和联系。 首先&#xff0c;让我们理解一下Node.js和浏览器的运行环境。Node.js是一个基于Chrome的V8引擎的服务器端JavaScript运行环境&#xff0c;允许开发者在服务器端运行JavaScript代码&#xff0c;并且提供了一系…

【MATLAB源码-第158期】基于matlab的海马优化算法(SHO)无人机三维路径规划,输出做短路径图和适应度曲线

操作环境&#xff1a; MATLAB 2022a 1、算法描述 海马优化器&#xff08;Sea Horse Optimizer, SHO&#xff09;是一种近年来提出的新型启发式算法&#xff0c;其设计灵感来源于海洋中海马的行为模式&#xff0c;特别是它们在寻找食物和伴侣时表现出的独特策略。海马因其独特…

【IC设计】Scala、Chisel、Chiseltest版本兼容信息

在maven仓库中精心整理的Scala、Chisel、Chiseltest的版本兼容信息&#xff0c;有了这个再也不怕sbt构建时找不到库文件了&#xff01; 目前百度上我搜不到这个资料&#xff0c;是我从maven官网上整理的&#xff0c;如果对你有用希望点点赞~ scala 2.11系列兼容的chisel版本为兼…

LabVIEW管道缺陷智能检测系统

LabVIEW管道缺陷智能检测系统 管道作为一种重要的输送手段&#xff0c;其安全运行状态对生产生活至关重要。然而&#xff0c;随着时间的推移和环境的影响&#xff0c;管道可能会出现老化、锈蚀、裂缝等多种缺陷&#xff0c;这些缺陷若不及时发现和处理&#xff0c;将严重威胁到…

【C++精简版回顾】14.(重载2)流重载

1.流重载 istream ostream 1.class class MM {friend ostream& operator<<(ostream& out, MM& mm);friend istream& operator>>(istream& in, MM& mm); public:MM() {}MM(int age,string name):age(age),name(name) {} private:int age;st…

Java的堆如何分代的?

前言&#xff1a; java对象一般都是朝生夕死&#xff0c;也有部分对象是一直存在的。两种对象如何都放在一起&#xff0c;进行垃圾回收的时候效率较低。所以通过将不同时期的对象放在不同的内存池中&#xff0c;节省垃圾回收的时间&#xff0c;提高性能。 组成&#xff1a; 新生…

Java的数据类型与变量详解

数据类型与变量 文章目录 数据类型与变量前言一、数据类型1. 基本数据类型2. 引用数据类型 二、包装类型1. 包装类型简介2. 自动装箱与拆箱3. 包装类型的常用方法4. 注意事项5. 示例 三、变量1. 变量声明2. 变量赋值3. 变量声明与赋值同时进行4. 示例 四、总结 前言 在Java编程…

JAVA开发第一个Springboot WebApi项目

一、创建项目 1、用IDEA新建一个SpringBoot项目 注意JDK与Java版本的匹配 2、添加依赖 (1)、Lombok (2)、Spring Web (3)、Mybatis Framework (4)、MySqlDriver 项目中的配置 pom.xml 如下 <?xml version="1.0" encoding="UTF-8"?> …

使用query请求数据出现500的报错

我在写项目的时候遇到了一个问题&#xff0c;就是在存商品id的时候我将它使用了JSON.stringify的格式转换了&#xff01;&#xff01;&#xff01;于是便爆出了500这个错误&#xff01;&#xff01;&#xff01; 我将JSON.stringify的格式去除之后&#xff0c;它就正常显示了&…

WPF —— TextBox 控件详解

TextBox控件是WPF中最基本的文字输入控件。它允许最终用户在一行、对话输入、或多行编写&#xff0c;就像是个编辑器。 关于TextBox常用的属性 FontFamily 字体样式 宋体 楷体等 FontWeight 字体粗细 &#xff0c; Bold加粗 FontStyle 字体样式 斜体和…

题目 1563: 蓝桥杯-质因数

题目描述: 将一个正整数N(1< N< 32768)分解质因数。例如&#xff0c;输入90&#xff0c;打印出902*3*3*5。 代码: package lanqiao;import java.util.*;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.ne…

【Python爬虫实战】抓取省市级城市常务会议内容

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…

Leetcode 239:滑动窗口最大值

题意 大小为 k 的滑动窗口从整数数组 nums 的最左侧移到最右侧&#xff0c;只能看到滑动窗口中的 k 个数字&#xff0c;窗口每次向右移动一位。 返回滑动窗口的最大值。 示例 1&#xff1a; 输入&#xff1a;nums [1,3,-1,-3,5,3,6,7], k 3 输出&#xff1a;[3,3,5,5,6,7] …
最新文章