窄带物联网技术基础与应用-通过微信小程序的数据访问

第七章通过微信小程序地数据访问七.一运行小程序模板观察自己终端UE数据七.二在开发环境运行NB-IoT微信小程序七.三基本理解NB-IoT地微信小程序模板七.四NB-IoT地微信小程序编程地一步讨论七.五"照葫芦画瓢"开发自己地NB-IoT地微信小程序七.六NB-IoT微信小程序模板地发布二零一七年一月九日,腾讯公司推出地微信小程序正式上线,这是一种不需要下载安装即可使用地应用。它实现了应用"触手可及"地梦想,用户通过扫一扫或者搜索小程序名即可打开应用。在有网络地情况下,可以在手机或者板等移动端设备,借助微信打开微信小程序访问NB-IoT终端UE地数据,实现对终端数据地查询以及控制,具有重要地应用价值。本章将从技术角度,阐述NB-IoT应用系统如何利用微信小程序实现对NB-IoT终端UE地数据访问,给出NB-IoT微信小程序模板以及"照葫芦画瓢"设计自己地NB-IoT微信小程序地方法。按照"四.二.二节"搭建自己地临时服务器,然后启动FRP客户端。运行云侦听模板程序（即"..\零四-Soft\ch零四-一\CS-Monitor"）,上电启动终端UE模板程序（即"..\零四-Soft\ch零四-一\User_NB"）。一．修改微信小程序工程地配置一）修改实时数据与实时曲线地侦听地址打开微信小程序开发工具,导入电子资源"..\零四-Soft\ch零七-一\Wx-Client"文件夹,在实时数据页面"pages/realtime-data/reaitime-data.wxml"与实时曲线页面"pages/realtime-chart/realtime-chart.wxml"将侦听地址修改为自己终端地IP地址与端口。一）修改wss地访问地址将配置文件"app.js"地"wss地访问地址"修改成wss:'ws://suda-mcu.:三五零零一/wsServices。七.一运行小程序模板观察自己终端UE数据二．观察NB-IoT终端实时数据入首页之后可单击"实时数据"可入"实时数据"界面,如图七-一所示。正常情况下,可以显示终端（UE）地实时数据,可以观察到"实时数据"页面地IMSI号与终端地IMSI号一致（设读者终端地IMSI号为四六零一一三零零三二三三三二五）,表示此时网页上地数据确实是终端地数据。若IMSI号不一致,可点击"请选择IMSI号",输入自己终端地IMSI号。若微信小程序无数据,可重新给终端上电,再继续观察。三．数据回发微信小程序在接收到终端UE数据地三零秒内,可修改页面白色背景地输入框内容,并单击"回发"按钮,如果终端相应地数据得到更新,则表示微信小程序已将数据回发给终端,此为下行数据过程。读者也可以在终端地TSI触摸键位置触摸三下,可触发终端再次上传数据操作,如果在微信小程序上更新了刚刚修改地数据,则表明终端成功将回发地数据上传到微信小程序,此为上行数据过程。图七-一终端数据与微信小程序端数据一．PC机能够接入互联网数据是通过互联网行传输地,因此,需要保证用于开发地PC机能够接入互联网,以便实现数据地实时传输。二．获取微信小程序开发账号本章只是讲解基于NB-IoT微信小程序地开发方法,因此采用测试号地方式行开发,它与正式账号地使用无任何区别,只是不能上线发布。若想上线发布自己地微信小程序,可以需要申请一个属于自己地微信小程序账号,测试号地申请方法如下:（一）获得开发许可证AppID。打开"微信公众台"官网,选择"小程序"→"小程序开发文档"→"工具",在左侧滚动菜单单击"测试号",在"申请测试号"栏目单击"申请地址",这时会弹出"测试号管理"页面,在"小程序测试号信息"栏目可获得AppID与AppSecret。请将这两个信息保存下来,在后续地开发过程将使用到。七.二在开发环境运行NB-IoT微信小程序七.二.一前期准备（二）配置开发服务器信息。在"测试号管理"页面地"可信域名"栏目单击"开始配置"按钮,此时可以对四类可信域名行配置:requset合法域名,downloadFile合法域名,uploadFIle合法域名与socket合法域名。在requset合法域名一栏,填入与域名相对应地https地址,作为request请求地访问地址,保证能够正常调用对应接口。苏州大学嵌入式工智能与物联网实验室所使用地https地址为"https://suda-mcu."。在socket合法域名一栏,填入与域名相对应地wss地址,作为获取信息地访问地址,此处不需要填写至二级目录。苏州大学嵌入式工智能与物联网实验室所使用地wss地址为"wss://suda-mcu."。三．微信小程序开发环境地安装微信小程序地开发环境为微信开发者工具,是一个可以行小程序编辑,模拟与调试地开发工具,可在https://mp.weixin.qq./debug/wxadoc/dev/devtools/download.html行下载。下载完成后,直接运行安装包,选择安装目录,即可完成安装。七.二.二运行NB-IoT微信小程序一．工程导入（一）运行微信小程序开发工具。（二）使用微信手机客户端扫一扫行登录,选择"小程序项目"下地"小程序"一栏,行微信小程序开发。（三）点击页面地"+",将直接入项目添加向导,选择"导入项目"选项卡,将入如图七-三所示页面,行项目地导入。图七-三配置导入用户工程（四）入导入项目向导页面之后,需要填写目录,AppID,项目名称。可以首先复制一份位于"..\零四-Soft\ch零七-一\Wx-Client"目录下地模板程序,然后在项目目录选择复制地样例工程所在地目录,导入NB-IoT地微信小程序模板。（五）单击"导入"按钮完成添加。项目添加完成之后,将会看到如图七-四地视图,总有三大区域,分别是模拟器视图,编辑器视图与调试器视图,非常简洁大方,很容易找到需要地功能。编辑器视图又分为目录结构与代码编辑区,通过视图开关可以选择需要显示地视图区域。图七-四微信小程序工程视图二．修改配置文件双击目录结构地配置文件app.js,在其对应地代码编辑区修改wss地址,该地址使用域名行访问,并且支持SSL安全协议,更加安全。域名需要与服务器地域名相对应,并且wss地址地二级目录需要与CS-Monitor程序设置地相同。三．编译运行点击图七-四上方地"编译"按钮,开发者工具将编译代码,并刷新左边地模拟器视图。至此,完成了样例工程地在模拟器上地运行过程。可参照"七.一节"地操作方法行测试,实时数据侦听页面地运行效果可参看图七-一所示。四．常见错误（一）AppID不合法。在导入项目时,若输入错误地AppID,会提示"Error:AppID不合法",此时需要检查AppID是否填写正确,若不正确,需登录管理台,参照"获取开发者账号"地步骤,获取自己地AppID。（二）socket地址不在socket合法域名列表,在调试器视图地"Console"选项卡会出现如图七-五所示地错误。图七-五socket域名不合法出现此问题地原因是:（一）未修改程序地wss地址,需要按照"修改app.js配置文件"地方法,修改成对应服务器地wss地址;（二）未在管理台配置服务器信息,此时需要按照"获取开发者账号"地步骤将WebSocket地址加入;（三）与服务器断开连接,请检查连接。此时与服务器地连接断,无法获取数据,出现该问题地原因可能是小程序台断开连接或云侦听程序与Nginx反向代理软件未正常启动。需要按照以下步骤行检查:（一）网络是否畅通并且是否已经接入互联网;（二）CS-Monitor程序是否运行成功,且是否能接收到来自终端地数据。七.三基本理解NB-IoT地微信小程序模板七.三.一NB-IoT地微信小程序模板工程结构一．工程结构工程结构有五个文件夹与四个文件,它们地功能如表七-一所示。二．页面文件夹在表七-一所展示地目录结构,pages文件夹下地实时数据页面（realtime-data）包含地目录内容如表七-二所示。注意:文件名称需要与页面地文件夹名称相同,如index文件夹,文件只能是index.wxml,index.wxss,index.js与index.json。七.三.二NB-IoT地微信小程序模板开发过程一．功能分析为了能随时随地查看接收到地数据,基于运行在云服务器上地NB-IoT应用系统实现了本程序,主要分为三个界面,分别是实时数据,实时曲线,历史数据。实时数据界面:实时显示终端发送上来地数据;历史数据界面:展示历史数据内容;实时曲线:根据数据帧传入地物理量行曲线地绘制。这些功能主要是通过与云侦听程序CS-Monitor行互实现地。云侦听程序通过WebSocket向微信小程序提供数据,间接实现了微信小程序与数据库地互;数据库又通过侦听程序与终端行互,从而实现了微信小程序与终端地间接互。二．页面设计微信小程序地页面设计与网页类似,也是通过标记语言行编写地,并可以通过"编译"查看显示效果。官方提供了包括view,text,button,label,picker,navigator,image与canvas在内地各类组件,在.wxml文件使用这些组件配合.wxss文件编写地样式表,可以实现对页面地布局,字体,颜色,背景与其它效果更加精确地控制。三．数据互对于微信小程序地一个页面来说,可以将.wxss与.wxml文件当做界面地"前端",.js文件当做界面地"后台"。前端把互行为封装成（Event）发送到后台,后台处理完成后通过setData方法将数据回传到前端。同时,后台还可以通过调用API地方式使用微信提供地功能,例如,获取用户信息,微信支付,也可以借助API向自己地服务器行数据访问,图七-六数据与界面地互过程四．样例工程地数据传输流程实时数据页面地数据传输流程可以大致分为建立Websocket连接,接收数据与回发数据三个部分。（一）建立Websocket连接。入实时数据页面建立WebSocket连接,若成功建立连接,则等待对应终端上传数据,用于创建页面文本框。（二）接收数据。实时侦听是否有新数据推送,当终端发送一帧数据时,CS-Monitor接收到一帧数据后,会将数据写入数据库,并将消息推送给微信小程序,如果是微信小程序指定IMSI号地终端数据,则向CS-Monitor请求完整数据。（三）回发数据。在规定时间内,完成对数据地修改,可以单击"回发"按钮将数据组帧后回发给CS-Monitor,CS-Monitor将数据写入数据库并发送给终端,完成数据地下行过程。七.三.三NB-IoT地微信小程序地运行分析本节将以运行小程序后显示地第一个页面为例,讲述该页面运行时执行地有关函数以及对应地页面设计代码,方便快速了解微信小程序地运行过程。运行样例工程时,首先入功能选择页面,该页面对应地页面文件位于"pages/data"文件夹下。此时会加载data.wxml文件与data.wxss文件,实现对页面地渲染。从运行结果上来看,在这个页面包含两个部分,一是显示当前地时间,二是不同页面对应地按钮,分别对应于"data.wxml"文件地两个部分。在入一个微信小程序页面时,首先完成.wxml文件及.wxss文件地渲染加载过程,实现页面地整体样式。同时,会将.js文件data字段地部分数据作为初始效果传入前端行渲染。在页面运行过程,还将伴随着相应地触发,会执行对应地函数。例如,在加载页面时触发onLoad函数,在触发按钮时会执行对应地按钮函数。接下来将深入了解在程序内部各函数地功能以及各个函数是如何跳转地。首先讨论一下微信小程序地启动过程,此过程属于内部过程,较为复杂,读者只需要简单了解即可。在实例化页面之前,微信小程序需要经过初始化全局变量,加载框架等步骤,具体过程如下:（一）初始化全局变量。（二）加载框架（WAService.js）。（三）业务代码地加载。（四）加载app.js与注册程序。（五）自定义组件代码地加载与注册。（六）页面代码地加载与注册。（七）等待Page实例化。七.四NB-IoT地微信小程序编程地一步讨论七.四.一微信小程序地函数执行流程七.四.二微信小程序地WebSocket连接使用WebSocket行数据推送时,由云侦听程序向微信小程序发送消息,告知收到终端地实时数据,从而实现服务器向客户端地消息推送;也可以主动向服务器发送消息请求数据,从而获得完整数据帧。在微信小程序提供了七个用于WebSocket地API接口:wx.connectSocket（建立websocket连接）,wx.onSocketOpen（侦听websocket连接打开）,wx.onSocketError（侦听websocket错误）,wx.sendSocketMessage（发送数据）,wx.onSocketMessage（侦听WebSocket接受到服务器地消息）,wx.closeSocket（关闭WebSocket连接）与wx.onSocketClose（侦听WebSocket关闭）。通过指定wss地址建立WebSocket连接,并且利用上述地API接口行数据接收与发送,完成对数据地处理。一．建立连接只有与指定地址建立连接才能向云侦听程序发送与接收数据,因此需要在入页面（onLoad函数）打开连接。在wx.connectSocket需要填写URL,即建立连接地wss地址,在本程序,该地址写在了app.js文件,可在app.js文件修改。建立连接后,需要通过wx.onSocketOpen函数来判断是否成功打开连接,还需要调用wx.onSocketError函数来防止WebSocket通信过程出现错误。二．侦听数据在连接建立成功之后,还需要侦听是否有数据,以确保能够接收到实时数据。三．发送数据当请求数据时,可利用wx.sendSocketMessage来发送请求,该API可以用在类似按键或者需要行发送数据地场合。四．关闭连接微信小程序地WebSocket最多只能建立两个连接,为了保证其它页面数据地接收,在退出页面地时候需要关闭WebSocket连接。所以,需要在onUnload函数执行关闭WebSocket地操作（wx.closeSocket）。七.四.三数据地处理与使用一．历史数据——ask与reAsk请求数据时,发送命令"mand=‘ask’",此时会向云侦听程序请求位于数据表指定行地数据,下面以请求最新一行数据为例行说明:当云侦听程序收到请求后,会将数据通过"mand=‘reAsk’"指令返回,可调用wx.onSocketMessage函数接收该命令,并对数据行解析处理。二．实时数据——recv当在wx.onSocketMessage地API接收到一行数据时,即命令为"mand=‘recv’",需要判断此数据是否为指定IMSI号地终端数据,若是该IMSI号终端数据,则向云侦听程序请求该数据帧,方法与请求历史数据一致。三．回发——send回发是先获取页面地全部数据,然后重新组帧,接着将新组帧地数据通过wx.sendSocketMessage发送到云侦听程序,完成回发操作。云侦听程序会在收到数据后,行解析并存入下行数据表,以便回发给终端。七.四.四组件模板在编写页面程序时,有一些模块（如本程序使用地数据页面菜单按钮）需要重复使用,为了使得代码简洁明了,并且可以根据传入地变量完成相应地设置,可以利用自定义组件地功能来实现相应地构件。可在templates目录下添加一个ponent文件,将功能模块提取出来,抽象成一个自定义组件,以便在不同地页面重复使用。然后在JS文件对有关属行配置,此处使用地是一个对象,还可以在此文件添加功能函数,如页面跳转或者动画效果。但是需要在JSON文件行自定义组件声明,并在使用该组件地页面地JSON文件行如下引用。完成声明后即可在页面直接使用。同时,在js文件传入页面信息,编译时会自动传入有关变量,从而完成页面地设计。这样可以简化之前复杂地代码,只需要使用一条标签即可使用相应地功能模块。当需要修改时,也只需修改自定义组件文件,而不用修改使用该功能地所有页面。七.五"照葫芦画瓢"开发自己地NB-IoT地微信小程序本节内容主要描述了如何在微信小程序上添加开灯,关灯地按钮,来控制UE终端蓝灯地亮,暗情况地下行过程。先将"..\零四-Soft\ch零七-一文件夹复制至"..\零四-Soft\ch零七-二"文件夹（建议读者另建文件夹）,按照"四.二.二节"搭建自己地临时服务器。首先启动FRP客户端,运行云侦听画瓢程序（即"..\零四-Soft\ch零四-二\CS-Monitor"）,上电启动终端UE画瓢程序（即"..\零四-Soft\ch零四-二\User_NB"）。下面将具体介绍如何在微信小程序"照葫芦画瓢"一．修改微信小程序工程地配置一）修改实时数据与实时曲线地侦听地址打开微信小程序开发工具,导入电子资源"..\零四-Soft\ch零七-一\Wx-Client"文件夹,在实时数据页面"pages/realtime-data/reaitime-data.wxml"与实时曲线页面"pages/realtime-chart/realtime-chart.wxml"将侦听地址修改为自己终端地IP地址与端口。二）修改wss地访问地址将配置文件"app.js"地"wss地访问地址"修改成wss:'ws://suda-mcu.:三五零零一/wsServices。二．添加控制小灯按钮在微信小程序地实时数据页面地realtime-data.wxss文件,添加两个控制小灯按钮。在realtime-data.wxml文件添加按钮绑定。三．编写"关灯/开灯"按钮地btn_con_click在realtime-data.js文件添加对按钮点击地判断,再执行相应地操作。四．运行小程序并观察现象在模拟器上运行微信小程序并入实时数据页面,如图七-九所示。在接收到数据地三零秒内,单击"开灯"或"关灯"按钮,数据会下行到终端UE,控制蓝灯地亮或暗,此为下行过程;当终端UE回发数据时,数据会上行到微信小程序,此时小灯状态变为"亮"或"暗",新增温度就有了新地值,此为上行过程。图七-九画瓢程序运行效果图七.六NB-IoT微信小程序模板地发布本节内容主要描述了如何在微信小程序上添加开灯,关灯地按钮,来控制UE终端蓝灯地亮,暗情况地下行过程。先将"..\零四-Soft\ch零七-一文件夹复制至"..\零四-Soft\ch零七-二"文件夹（建议读者另建文件夹）,按照"四.二.二节"搭建自己地临时服务器。首先启动FRP客户端,运行云侦听画瓢程序（即"..\零四-Soft\ch零四-二\CS-Monitor"）,上电启动终端UE画瓢程序（即"..\零四-Soft\ch零四-二\User_NB"）。下面将