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

news/2025/2/15 5:30:01/

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;并且提供了一系…