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

时间:2017-02-24 19:47:40   收藏:0   阅读:250

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

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

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


一、创建微信应用,配置微信服务器

         在云智易开发平台中,开发者需要在应用管理中创建一个微信应用,填写微信公众号的基本信息:APPID, APPSecret等,另外平台会为该应用生成一对APPUrl以及APPToken可用于配置微信公众平台设备功能的服务器配置,如果开发者采用这种方式,那么微信服务器转发的设备事件(如绑定/解绑/订阅设备状态等)都由云智易平台处理。当然,开发者也可以采用另外一种方式,即自身先处理微信硬件的设备事件,并转发设备事件通知云智易平台。

技术分享

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

技术分享

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

二、微信设备控制

技术分享

         在云智易平台中,微信H5和服务器采用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接口可进行增删查改操作;

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

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

         数据转发服务可实现设备数据到开发者服务器的转发,如设备上报的数据、设备的在离线状态变化等。

         前面三大数据服务器都是可以通过RESTful接口来完成,在数据转发服务中需要完成和微信开发中一样的服务器验证,随后服务器就可以对转发过来的数据进行个性存储处理。

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

技术分享

四、告警功能

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

公众号推送告警信息:

技术分享

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

技术分享

五、UI组件

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

技术分享

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

技术分享


评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!