第三方（微信小程式）連線OneNET平臺

阿新 • • 發佈：2018-10-31

前言

一方面是個課設，另一方面專案組有點需求，順便就把提高部分做了。主要用的微信小程式來作為展示介面以及控制介面，以及使用了OneNET平臺連線硬體。

因為硬體部分不是我擅長的，所以這邊就直接燒了例程，稍微改改。所以在本文中硬體平臺就簡寫了。

硬體平臺

說明

先說硬體平臺的原因是從開發順序的角度來說，應該先除錯完成硬體平臺並完成基本功能，然後接入OneNET，最後再用UI顯示並控制。當然只是習慣，高手自然有自己的套路。

資料流控制

這裡主要是寫要傳送什麼資料給OneNET，這邊的程式碼主要是控制燈以及溫溼度感測器的資料。當然這個推送是要符合規範的，這邊也只是照著例程修改，畢竟硬體程式碼根本不熟悉。上傳程式碼大致如下：

void OneNet_SendData(void)
{
	EDP_PACKET_STRUCTURE edpPacket = {NULL, 0, 0, 0};		//協議包
	char buf[128];
	short body_len = 0, i = 0;
	
	UsartPrintf(USART_DEBUG, "Tips:	OneNet_SendData-EDP\r\n");
	memset(buf, 0, sizeof(buf));
	body_len = OneNet_FillBuf(buf);																	
	
	if(body_len)
	{
		if(EDP_PacketSaveData 
(NULL, body_len, NULL, kTypeString, &edpPacket) == 0)				
		{
			for(; i < body_len; i++)
				edpPacket._data[edpPacket._len++] = buf[i];
			
			M6312_SendData(edpPacket._data, edpPacket._len);										
			UsartPrintf(USART_DEBUG, "Send %d Bytes\r\n", edpPacket._len);
			
			EDP_DeleteBuffer( 
&edpPacket);													
		}
		else
			UsartPrintf(USART_DEBUG, "WARN:	EDP_NewBuffer Failed\r\n");
	}
}

接收命令

接收命令就是一個拆解的過程，比如我收到blueled:1，那就以冒號為基準拆分開，一個是物件，一個是動作，然後針對不同的硬體執行不同的動作。

OneNET平臺

介紹

簡單介紹一下OneNET。OneNET是中國移動物聯網開放平臺是由中國移動打造的PaaS物聯網開放平臺。

感覺主要為軟體或者硬體兩者任何一個不大熟悉的同學提供了很大的方便。如果硬體不大熟悉，可以用開發板，上面有很多例程；如果軟體不大熟悉，平臺裡面可以建立快速應用。

流程

建立產品

首先是建立你的產品，這裡主要就選接入方式，以及使用的協議，我們採用的是OneNET特有的EDP協議（例程使用）。其實也可以採用HTTP，如果長連線的話MQTT都是不錯的選擇。
建立產品

建立裝置

然後就可以建立裝置了，鑑權資訊隨便填一下就好了。資料保密性如果嫌麻煩，可以直接設定為公開（私有的我也沒試過）。

我們主要要用的是裝置ID，這個記下來就好了，之後會用到。

APIKEY管理

然後在許可權管理那邊我們檢視一下APIKEY，這個之後連線的時候需要放入請求頭header中。
APIKEY

建立快速應用

同時OneNET還在應用管理處為我們提供了可以搭建快速應用的元件，你只需要拖拽然後填寫一點資訊就可以了。這對於軟體程式設計不大熟悉的人來說還是很方便的，但是由於必須登入使用，所以還是建議有能力的話利用API控制。

微信小程式

簡介

微信小程式是騰訊推出的一種不需要下載安裝即可在微信平臺上使用的應用。

因為不需要安裝下載，所以這也是我看中它的原因之一。在中國，微信幾乎安裝在每一個智慧機使用者的手機上，這麼大的體量也是小程式能快速發展的原因。

除錯的時候可以設定不校驗合法域名，這樣前期會方便一點，但是要想將小程式上線還是要設定一下的。

介面設計

介面要看熟練度和審美，我也不想消耗很多時間，所以這邊設計得就很簡單，所以就只有幾個按鈕而已。

傳送請求

這裡需要你讀懂一下OneNET平臺提供的API就行，在官方文件中選用你用的協議，然後檢視你需要使用的API即可。
注意一點，apikey是要封裝在header裡面的，這和我之前用過的平臺不大一樣。

我這邊的流程很簡單，就三步（請見下面三個小標題），所以就取了三個API使用。
const deviceInfoURL = "https://api.heclouds.com/devices/" + deviceid
const getDataStreamURL = "https://api.heclouds.com/devices/" + deviceid + "/datastreams"
const sendCommandURL = "https://api.heclouds.com/cmds"

獲取裝置資訊

第一步獲取裝置資訊，主要檢視裝置是否線上，官方文件中有說明返回的json資料格式，但是建議除錯的時候可以先console.log打印出來，然後根據格式設計程式碼。這邊我只要檢視成功返回後的online這個資料。如果線上，那就可以初始化按鈕資訊；如果不線上，那沒有必要繼續操作了。

function getDeviceInfo(that) {
  //檢視裝置連線狀態，並重新整理按鈕狀態
  wx.request({
    url: deviceInfoURL,
    header: {
      'content-type': 'application/x-www-form-urlencoded',
      "api-key": apikey
    },
    data: {

    },
    success(res) {
      // console.log(res)
      if (res.data.data.online) {
        console.log("裝置已經連線")
        deviceInit(that)//初始化按鈕
        deviceConnected = true
      } else {
        console.log("裝置還未連線")
        deviceConnected = false
      }
    },
    fail(res) {
      console.log("請求失敗")
      deviceConnected = false
    },
    complete() {
      if (deviceConnected) {
        that.setData({ deviceConnected: true })
      } else {
        that.setData({ deviceConnected: false })
      }
    }
  })
}

這邊還設定了一個定時器，每三秒請求重新整理一次，及時重新整理資訊。

    var timer = setInterval(function(){
      getDeviceInfo(that)
    }, 3000)

初始化按鈕資訊

初始化在確定裝置完成連線後進行，更新按鈕的狀態。其實就是重新整理開關的checked值。
因為最後獲取的是一組資訊，需要遍歷一遍更新各個按鈕的狀態。

function deviceInit(that) {
  console.log("開始初始化按鈕")
  //初始化各個硬體的狀態
  wx.request({
    url: getDataStreamURL,
    header: {
      'content-type': 'application/x-www-form-urlencoded',
      "api-key": apikey
    },
    data: {
      
    },
    success(res) {
      console.log(res)
      for(var i=0; i<res.data.data.length; i++) {
        var info = res.data.data[i]
        
        switch(info.id) {
          case "Blue_Led":
            if(info.current_value == 1) {
              that.setData({ blue_checked : true})
            } else {
              that.setData({ blue_checked : false})
            }
            break
          case "Beep":
            if (info.current_value == 1) {
              that.setData({ beep_checked: true })
            } else {
              that.setData({ beep_checked: false })
            }
            break
          case "Red_Led":
            if (info.current_value == 1) {
              that.setData({ red_checked: true })
            } else {
              that.setData({ red_checked: false })
            }
            break
          case "Tempreture":
            break
          case "Yellow_Led":
            if (info.current_value == 1) {
              that.setData({ yellow_checked: true })
            } else {
              that.setData({ yellow_checked: false })
            }
            break
          case "Green_Led":
            if (info.current_value == 1) {
              that.setData({ green_checked: true })
            } else {
              that.setData({ green_checked: false })
            }
            break
          case "Humidity":
            break
        }
      }
    }
  })
}

傳送控制命令

控制這邊其實更多的是自定義程度比較高了，和硬體的處理程式碼有關。我們這邊的程式碼是類似於blueled:1來開啟燈的，所以傳送資訊的時候也是直接傳送字串就行了。

function controlLED(hardware_id ,switch_value) {

  console.log("傳送命令：" + hardware_id + ":" +switch_value )
  //按鈕傳送命令控制硬體
  wx.request({
    url: sendCommandURL + "?device_id=" + deviceid,
    method: 'POST',
    header: {
      'content-type': 'application/x-www-form-urlencoded',
      "api-key": apikey
    },

    data: hardware_id + ":" + switch_value ,
    success(res) {
      console.log("控制成功")
      console.log(res)
    }
  })
}

介面互動

微信小程式是MVVM結構的，所以在前後臺互動方面還是很迅速的。熟練掌握前端的花括號{{value}}，給裡面的值在後臺用setData賦值就行。
但需要注意的是，this.setData中this應該代表的是此頁面，如果你準備在相應完成之後進行操作，需要將this首先取出來，比如這樣：var that = this，然後用that表示this。

後記

因為網上很少有人寫了將第三方平臺接入OneNET平臺的部落格，所以還是自己動手寫了一篇。感覺光是把裝置連上OneNET不加第三方展示，整個產品還是效果很一般的。
當然本人還是很菜的，歡迎大家批評指正。