微信小程序获取Onenet图片_微信小程序 onenet

微信小程序获取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.index
            console.log(that.data.picindex)
            console.log(app.globalData.picindex)
          }
        },     
    })
  
  },


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

然后是通过这个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)
    
        }
      }
    })

  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

在wxml中的代码：

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

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