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

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.hqwc.cn/news/529748.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于FPGA加速的bird-oid object算法实现

导语 今天继续康奈尔大学FPGA 课程ECE 5760的典型案例分享——基于FPGA加速的bird-oid object算法实现。 &#xff08;更多其他案例请参考网站&#xff1a; Final Projects ECE 5760&#xff09; 1. 项目概述 项目网址 ECE 5760 Final Project 模型说明 Bird-oid object …

Linux安全--为Nginx加上PHP解析功能

yum install php-fpm -y安装php进程管理器 找到Nginx安装的路径 编辑Nginx配置文件

短视频,文案素材哪里找?找短视频文案素材指南

有很多创业者&#xff0c;耗费了很长时间创作出了很多短视频&#xff0c;文案素材没写好&#xff0c;导致浏览量下降&#xff0c;或者写文案的同时就已经花费了很长时间&#xff0c;导致没有时间发布视频&#xff0c;从而影响了流量&#xff0c;导致流量下滑&#xff0c;其实我…

STM32CubeMX学习笔记18——FSMC(TFT-LCD屏触摸)

1.触摸屏简介 目前最常用的触摸屏有两种&#xff1a;电阻式触摸屏和电容式触摸屏 1.1 电阻式触摸屏 电阻式的触摸屏结构如下图示&#xff0c;它主要由表面硬涂层、两个ITO层、间隔点以及玻璃底层构成&#xff0c;这些结构层都是透明的&#xff0c;整个触摸屏覆盖在液晶面板上…

如何轻松打造属于自己的水印相机小程序?

水印相机小程序源码 描述&#xff1a;微信小程序。本文将为您详细介绍小程序水印相机源码的搭建过程&#xff0c;教您如何轻松打造属于自己的水印相机小程序。无论您是初学者还是有一定基础的开发者&#xff0c;都能轻松掌握这个教程。 一&#xff1a;水印相机搭建教程 1 隐…

Linux:kubernetes(k8s)Deployment的操作(12)

创建deployment 命令 kubectl create deploy nginx-deploy --imagenginx:1.7.9 再去使用以下命令分别查询 ubectl get deploy kubectl get replicaset kubectl get pod 他是一个层层嵌套的一个关系 首先是创建了一个 deploy 里面包含着replicaset replicaset里面含有…

ChatGPT等AI使用的过程苦笑不得瞬间

引言&#xff1a; 在人工智能的浪潮中&#xff0c;我们见证了技术的飞速发展和智能应用的广泛渗透。特别是随着语言模型的进步&#xff0c;AI如ChatGPT、文心一言、通义千问、讯飞星火等已经成为人们日常生活和工作中不可或缺的助手。然而&#xff0c;与任何新兴技术一样&#…

025—pandas 根多列判断不在其他列的数据

思路 是有两个相同结构的数据表&#xff0c;已知第二个表是第一个表的部分数据&#xff0c;需要以其中两列为单位&#xff0c;判断在第一个表中存在&#xff0c;在另外一个表中不存在的数据。 思路&#xff1a; 我们先将 df1 和 df2 的 x、y 列取出&#xff0c;组合为元组形成…

分享axios+signalr简单封装示例

Ajax Axios Axios 是一个基于 promise 网络请求库&#xff0c;作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 从浏览器创建 XMLHttpReque…

C++容器适配器stack、queue、priority_queue

文章目录 C容器适配器stack、queue、priority_queue1、stack1.1、stack的介绍1.2、stack的使用1.3、stack的模拟实现 2、queue2.1、queue的介绍2.2、queue的使用2.3、queue的模拟实现 3、priority_queue3.1、priority_queue的介绍3.2、priority_queue的使用3.3、仿函数3.4、pri…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Navigation)

Navigation组件是路由导航的根视图容器&#xff0c;一般作为Page页面的根容器使用&#xff0c;其内部默认包含了标题栏、内容区和工具栏&#xff0c;其中内容区默认首页显示导航内容&#xff08;Navigation的子组件&#xff09;或非首页显示&#xff08;NavDestination的子组件…

mybatisplus的条件构造器

条件构造器wrapper&#xff0c;主要用于构造sql语句的where条件&#xff0c;他更擅长这个&#xff0c;但也可以用于构造其他类型的条件&#xff0c;比如order by、group by等。 条件构造器的使用经验&#xff1a; 基于QueryWrapper的查询 练习1. void testQueryWrapper(){Q…