微信小程序获取Onenet平台的图片

1.Onenet平台

我做的项目是通过STM32F4开发板，结合ov2640摄像头和Esp6266 WiFi模块拍照上传图片到Onenet平台，再通过微信小程序获取图片显示在手机端。因为已经成功了，所以把经验分享出来，希望以后还有用Onenet的小朋友可以用到。

当初在做这个项目时，因为Onenet平台有了新的版本，用起来特别麻烦，而网上有的资料都是基于旧版本的，所以折腾了很久，最重要的是我没有学过JavaScript，没搞过前端，对于很多语法都不是很了解，也是硬着头皮在用微信开发者工具。

首先是传图片到Onenet平台，这部分很简单，大概就是这样子的，每个图片都有他唯一的index，微信小程序就是通过这个index才能找到对应的图片。

然后需要记住的就是你的设备ID，API地址，API Key，这些在数据流详情都能看到。

还有最最最关键的Master APIkey，在首页产品概况中点击查看，因为每次都需要发送手机验证码才能查看，所以建议把这些Key都放在一个文档中保存起来，会很省事。

2.微信小程序

微信小程序的开发我使用的是微信开发者工具，具体使用方法可以参考微信开发者文档，这里用的是HTTP协议，参考Onenet平台的文档Onenet文档。

首先通过查询数据流的命令：“https://api.heclouds.com/devices/” + deviceid + "/datastreams"获取Onenet的数据，先获取数据流的目的是为了提取图片的index。

因为index不是提前写好的，每次通过STM32上传图片，这个index都会变，所以必须每次都要重新获取一下index的值，接着赋值给一个全局变量app.globalData.picindex，记住这个地方一定要用全局变量，不然不会显示图片。

代码如下：

  getOnenetData:function() {var that = this let deviceid = "913500000"let apikey = "=zz=04k=AasdafaU55ZfghbSs="wx.request({url: "https://api.heclouds.com/devices/" + deviceid + "/datastreams",method: 'GET',data: {picindex:''},header: {"content-type": 'application/x-www-form-urlencoded',"api-key": apikey},success(res) {if (res.statusCode === 200) {/* console.log(res)*/that.setData({picindex: res.data.data[0].current_value.index,})app.globalData.picindex = res.data.data[0].current_value.indexconsole.log(that.data.picindex)console.log(app.globalData.picindex)}},     })},

然后是通过这个api接口获取图片数据：“http://api.heclouds.com/bindata/” + 之前获取到的index。这里有一个非常重要的问题，就是如果仅仅获取图片数据，图片数据都是乱码，没办法显示在手机端，这个问题困扰了我好久，直到我看到这个博客小程序通过HTTP协议获取onenet平台上的图片数据并展示，真的很感谢这位博主，不然我的项目就到这里就结束了，也做不出来。

她告诉我把responseType设置成“arraybuffer”类型，
然后调用const base64=wx.arrayBufferToBase64(res.data)，虽然这个api接口已经弃用了，很多库都已经不更新这个接口了，但是依然可以用。

而且这个地方还有一个重要的点，就是apikey必须用之前的Master apikey，我因为这个问题也卡了好久都做不出来，接收不到返回的数据，无语。。。。。

 getOnenetpic: function () {var that = this;let apikey = "gMzlljasldj3V=KTLKxjlaFbIDw8="wx.request({url: "http://api.heclouds.com/bindata/" + app.globalData.picindex,method:"GET",responseType: 'arraybuffer',data: {img: '',},header:{//"content-type": 'application/json',//"content-type": 'application/x-www-form-urlencoded','api-key': apikey},success(res) {if (res.statusCode === 200) {console.log(res)// console.log(that.data.picindex)const base64=wx.arrayBufferToBase64(res.data) //console.log(base64) that.setData({img:"data:image/png;base64,"+base64})console.log(that.data.img)}}})},

这样就把图片数据转换成base64的编码形式展现出来：

在wxml中的代码：

<view><image src="{{img}}" class="p1"></image>
</view>

然后就可以在手机端看到STM32上传Onenet平台的图片了，就这么“简单”。。。。。。

微信小程序获取Onenet图片相关推荐

微信小程序获取Onenet温湿度数据并控制灯亮灭
其实之前就写过类似的文章,但是看过我博客的朋友就知道,我是先写微信小程序获取onenet,然后再写esp32上云到onenet.一篇是ESP32-C3通过MQTT协议把温湿度上传到OneNet平台 ...
微信小程序获取OneNet数据显示温湿度
微信小程序获取OneNet数据显示温湿度一.OneNet平台 1.我这里的设备是通过MQTT协议连接到OneNet平台的 2.微信小程序获取OneNet数据需要得到产品的api-key.设备 ...
微信小程序获取服务器图片[渲染层网络层错误]404
问题描述小程序获取服务器图片的时候报了这个错误检查了以下,地址没错,图片也可以显示出来,但调试器那里就是报错.重新捋了一遍发现了问题. 原因分析: 这是小程序加载的问题,程序运行加载到以下标签的时 ...
微信小程序获取文件图片的MD5
问题: 上传同一张图片解决办法:获取图片MD5值来对比如何使用? 1.对应页面引入对应的spark-md5.js //引入js const sMD5 = require('../../utils/ ...
小程序提交表单mysql_GitHub - kun19911227/minipro: 微信小程序提交带图片的表单
minipro 微信小程序提交带图片的表单目录说明 upload_images ├── pages │ ├── upload_info 提交表单 │ └── display_info 信息展示 ├─ ...
微信小程序中的图片处理
微信小程序中的图片处理微信小程序中的<image></image>用于向页面中插入图片.有两个重要的属性 1.src 要插入图片的资源地址 2.mode 图片裁剪.缩放 ...
微信小程序获取头像地址
微信小程序获取头像地址获取用户信息开发接口 wx.getUserInfo 接口参数说明: 微信文档地址: 获取用户信息开发接口 wx.getUserInfo 下面展示一些内联代码片. // 必须是 ...
微信小程序获取二维码接口整理，.Net Core后台获取小程序二维码
2019独角兽企业重金招聘Python工程师标准>>> 一.关于二维码接口说明参考:https://my.oschina.net/tianma3798/blog/1811307 获 ...
php展示微信图片尺寸,微信小程序实现image图片自适应宽度
本文主要和大家分享微信小程序实现image图片自适应宽度,希望能帮助到大家,首先我们先来了解一下image组件. 一.了解image组件由于image有默认的固定的宽度和高度,这样我们在做图片自适应 ...

微信小程序获取Onenet图片

微信小程序获取Onenet平台的图片

目录

1.Onenet平台

2.微信小程序

微信小程序获取Onenet图片相关推荐

最新文章

热门文章