WIFI物联网平台微信端开发分享

本文由企鹅圈原创成员Hunter_Zhu贡献。

本篇文章是基于近期一个项目微信端开发过程的一个总结。文中主要介绍了云智易平台下微信端开发的流程、该平台提供的主要功能以及此次H5开发使用到的一些UI组件。能够帮助企鹅仔高速对该平台微信开发有个了解。

本文介绍的微信硬件物联网开发思路不局限于某个平台。对市场上全部的平台，如机智云也是适用的，特此说明。

一、创建微信应用，配置微信server

在云智易开发平台中，开发人员须要在应用管理中创建一个微信应用，填写微信公众号的基本信息：APPID, APPSecret等，另外平台会为该应用生成一对APPUrl以及APPToken可用于配置微信公众平台设备功能的server配置。假设开发人员採用这样的方式，那么微信server转发的设备事件（如绑定/解绑/订阅设备状态等）都由云智易平台处理。

当然。开发人员也能够採用第二种方式。即自身先处理微信硬件的设备事件。并转发设备事件通知云智易平台。

wx_fmt=png" data-ratio="0.46881878209831257" data-w="1363" src="http://img.blog.csdn.net/20170221191559635?

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVlcWlhbl9zY3V0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" data-fail="0" style="margin: 0px; padding: 0px; height: auto !important; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; width: auto !important; visibility: visible !important;" alt="" />

在微信硬件平台中创建了产品后。我们就能够方便地在云智易平台中指定授权的微信产品号批量完毕设备微信授权，获取设备的二维码链接。

在此部分中主要体现物联网中用户管理、设备管理、用户和设备绑定的情景。

二、微信设备控制

在云智易平台中，微信H5和server採用websocket进行通信。

上图是云智易平台提供的微信应用开发流程图，从图中能够看出，微信设备开发可分5步走：

1）通过OAuth2.0获取微信用户的openid。

2）以openid为參数获取微信用户的认证码用于初始化XSDK实例；

3）以openid为參数获取微信用户的设备列表；

4）向XSDK实例导入设备列表；

5）通过XSDK实例监听设备的上报数据/向设备下发数据/监听设备的在离线状态变化/主动读取设备数据等。

上图中通过调用云智易平台提供的xsdk.js文件就可以完毕物联网的基本需求：用户和设备通信（读、写、订阅和通知），另外的功能拓展云智易平台通过RESTful接口想开发人员进行提供。针对微信开发除了上述中获取用户绑定的设备列表接口外还包含：

1）取消绑定设备；

2）获取微信JSAPI调用签名；

3）获取设备的信息。

4）改动设备的名称；

5）获取微信用户在云智易平台下的接口调用凭证access-token；

云智易平台提供了大量的RESTful接口拓展各种情景的功能，大部分都须要上述获取到的access-token来完毕调用。

三、数据服务

物联网情景中大多不满足于主要的设备控制，非常多时候须要为用户提供历史数据查看服务。云智易平台提供了四大数据服务：数据表，数据快照，统计规则以及数据转发。

数据表功能相似数据库，是云智易为开发人员提供的数据存储功能，开发人员通过调用RESTful接口可进行增删查改操作；

数据快照功能用于存储设备某一时刻的状态，通过设备快照服务能够获取历史数据以及变化的数据。

统计规则功能是基于数据快照的数据进行统计，获取数据的特征，如统计某个时间段内数据的最大值。最小值。平均值等信息；

数据转发服务可实现设备数据到开发人员server的转发，如设备上报的数据、设备的在离线状态变化等。

前面三大数据server都是能够通过RESTful接口来完毕，在数据转发服务中须要完毕和微信开发中一样的server验证，随后server就能够对转发过来的数据进行个性存储处理。

近期一个项目开发中。本人在数据展现上使用的是百度ECharts图表，ECharts功能强大，在实时数据和历史数据展现过程中主要使用了当中的数据区域缩放组件（dataZoom），通过这个组件，我们能够对大量的数据进行展现，对数据区域进行防缩、平移以关注某一小段的数据。例如以下图所展示，有了这两个功能就能实现大量数据的显示查看。

wx_fmt=png" data-ratio="0.9983388704318937" data-w="602" src="http://img.blog.csdn.net/20170221191700626?

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVlcWlhbl9zY3V0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" style="margin: 0px; padding: 0px; height: 601px !important; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; width: 602px !important;" alt="" />

四、告警功能

云智易平台中提供了两种设备告警的方式，一种是通过微信公众号直接推送告警，第二种用户在设备控制页面能够查看告警的消息。第一种方式是通过设置认证了的微信服务号的模板消息实现的，不须要涉及编程，对于第二种是通过平台提供的RESTful接口进行获取，然后再向用户进行展现。告警功能实现了设备出现异常时对用户通知的实时性，提示用户前去查看，告警的内容能够包含：设备某个数值超过指定范围获取设备的在离线状态通知等。

公众号推送告警信息：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVlcWlhbl9zY3V0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" style="margin: 0px; padding: 0px; height: 623.429px !important; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; width: 670px !important;" alt="" />

设备控制页面中获取告警列表：

五、UI组件

最后，向大家分享一下微信H5开发中一个不错的UI组件——MUI。其以ios平台UI为基础，追求原生UI感觉。例如以下图的输入对话框。除此以外。在性能上也有非常好的用户体验。

很多其它嵌入式Linux和物联网原创技术分享敬请关注微信公众号：嵌入式企鹅圈