| 注册
home doc ppt pdf
请输入搜索内容

热门搜索

年终总结个人简历事迹材料租赁合同演讲稿项目管理职场社交

家用双面湿擦玻璃窗机器人
首页
/
文档
/
其他

平***苏

贡献于2021-08-11

字数:51719







家双面湿擦玻璃窗机器——
软件设计





家双面湿擦玻璃窗机器——软件设计

摘
家双面湿擦玻璃窗机器作家电器着中重位现家户玻璃窗玻璃门者玻璃产品清洁玻璃窗等成生活中必少家务玻璃工清洗相麻烦尤面积较玻璃外侧清洗更难家双面湿擦玻璃窗机器出现解决方面困扰设计基智家居背景通行学设计控制机器思路包括微信程序开发Arduino编程环境C语言NodeMcu WiFi模块源代码编写建立程序NodeMcuWiFi模块间相互通讯考虑稳定性实现远程控制方便性设计选ESP8266NodeMcuWiFi模块控制软件采微信程序控制两者间通信采分连接第三方服务器阿里云物联网服务器实现间相互通讯实现手机端微信程序双面湿擦玻璃窗机器实时通信通微信程序远程操控工作状态
关键词：清洁玻璃窗机器NodeMcu WiFi模块Arduino阿里云物联网程序
















Software design of household double wet cleaning robot for cleaning class
Abstract
As one of the household appliances household doublesided wet glasswiping robots have an important position Nowadays almost every household has glass windows glass doors or other glass products so cleaning these glass windows has become a life It is an indispensable housework but the manual cleaning of the glass is quite troublesome especially for some large areas the outer side of the glass is more difficult to clean so the emergence of household doublesided wet glass robots is a good solution People are troubled in this regard This design is based on the background of smart home and the idea of designing and controlling robot by selfstudy including the development of small programs the source code writing of ESP8266NodeMcu WiFi module based on Arduino programming environment the establishment of small programs and ESP8266NodeMcuWiFi module Intercommunication Considering the stability remote control and convenience the design uses ESP8266NodeMcuWiFi module the control software is controlled by WeChat applet and the communication between the two is connected to a thirdparty server namely Alibaba Cloud IoT server Communicate with each other
Keywords Window cleaning robot NodeMcu WiFi module Arduino Alibaba Cloud IoT server small program












目 录

1引言 1
11研究背景 1
12设计目意义达技术求 1
13家双面湿擦玻璃窗机器现状 2
14双面湿擦玻璃窗机器发展趋势 2
15存问题应解决问题 3
2总体设计方案 3
21设计概述 3
22设计求 4
23方案设计计划 4
24总体设计思路 4
25实现功GPIO分配 5
3设计原理介绍 6
31工作原理 6
32微信程序开发原理介绍 6
33 NodeMcu WiFi模块介绍工作原理 8
34 程序NodeMcu互通信原理 9
4 软件介绍 11
41 微信开发者工具软件 11
42 Arduino IDE编程软件 15
5设计流程 15
51 硬件编程设计 16
52微信程序开发设计 19
6调试程 22
61微信程序调试 22
62综合调试 26
63实物图部分调试结果图 28
7结 31
71设计总结 31
72设计创新 31
73设计足处 32
74展 32
参考文献 33
谢 辞 34
附 录 35
附录1程序源码 35
附录2外文翻译 48





1引言
11研究背景
生活中玻璃生活品处见尤玻璃门玻璃窗着社会科技断发展高楼厦采玻璃制成玻璃幕墙玻璃窗玻璃隔板玻璃护栏等等清洁重前般家庭玻璃窗玻璃门抹布者简便工具进行工清洁智化时代出现动清洁玻璃机器目前市场部分机器清洁玻璃门侧进行双面清洁外侧玻璃难清洁干净清洁玻璃相耗时间高楼层般家庭户说外侧玻璃清洁更难加难危险
生活更加便捷提高生活质量减少劳动家庭清洁玻璃门窗更加方便效率满足更家庭户需求断尝试实现目标智机器研究热点许国家智机器领域已发展动双面清洁机器出现会生活变前更加美体现国现代化社会智化发展
12设计目意义达技术求
国家清洁玻璃工具已前抹布变便捷工具变现单面动清洁机器着科技断进步仅仅满足目前状态更想追求更完美清洁玻璃工作说仅危险相耗时间两基础设计目设计动化家双面湿擦玻璃窗机器第实现动化清洁节省力提高效率第二实现双面清洁通双面清洁提高清洁效率达户清洁求第三实现远程手机控制通连接NodeMcu WiFi模块实现手机端控制清洁机器状态提升户体验面体现家居智化发展方
国擦玻璃机器单面清洁做完全动化况般家庭户旧停留手工清洁通设计够解决户烦恼目前市面机器部分清洁侧烦恼够效率太太提高通手机端实现远程操作智方面促进清洁机器发展远程控制技术智家居方面早已应次设计会探索实现通手机控制机器实现全动清洁需机器放玻璃窗达技术求包括手机端程序设计开发设计开发思路WiFi模块程序通阿里云物联网服务器建立连接达机器交互目通模拟试验检验否达预期效果等中开发程序技术包括程序页面界面结构样式设计服务器建立连接实现发送数（控制指令）部分信息设计编写等WiFi模块代码编写实现预期功
13家双面湿擦玻璃窗机器现状
现智时代迅速发展时期型机器逐渐出现家视野尤家庭机器普目前国生活水中等部分家庭清洁板机器教育机器清洁玻璃窗机器等中清洁板机器清洁玻璃窗机器需求普程度断增加生产销售增加家型擦玻璃机器显然成家庭清洁帮手前家擦玻璃窗机器功够完善实现单面清洁遥控器控制等擦玻璃窗工具目前市面出现较家双面擦够做玻璃窗正面背面时清洁需工完成没动化智结合
国外已擦拭双面窗户机器2016年出现Windowmate擦玻璃窗机器动化双面清洁利置磁铁吸附目前止国外国家已普种技术生产双面擦玻璃机器已投入着科技进步断完善功目前国双面擦玻璃机器生产制造技术研究够成熟占领国市场单面擦玻璃窗机器双面擦玻璃窗工具国国外家擦玻璃窗机器手动操作控制然利遥控器控制
14双面湿擦玻璃窗机器发展趋势
作家居品擦玻璃窗机器已出现视野中传统抹布清洁玻璃窗工具已然满足生活水需求时代追求更加高效更加便捷更加智断研究单面动擦玻璃窗机器出现眼前家生活水提高进步促进家机器发展着擦玻璃窗机器断投入目前存足显易见没实现全动双面手机端控制功然国外已国家目前国导家擦玻璃窗机器单面型动擦玻璃机器着国济水科技水断提高智化双面擦玻璃窗机器必定目前擦玻璃窗机器发展趋势
技术方面实现双面清洁玻璃目前已技术利磁吸附原理分机副机放室侧通磁铁吸附放室外项技术现已成熟广泛应种领域必定成日双面擦玻璃窗机器研究技术功方面擦玻璃机器仅清洁玻璃窗清洁桌子厨房甚清洁某表面光滑家具功单发展趋势
智化社会断发展智家居更着发展前景家庭电器品已实现连接WiFi网络手机端控制实现部手机够操作控制部分家电器擦玻璃窗机器作重家电器着智家居方发展断智化必定未发展趋势仅仅擦玻璃机器家电器未会着智化发展脱离传统电器品体现型机器必定着智化发展
15存问题应解决问题
目前智家居机器研究领域发展中扫机器洗碗机器擦拭玻璃窗机器等层出穷已部分家庭户尤扫机器清洁玻璃窗机器户中必定存着户体验问题户体验问题反映技术问题现擦玻璃窗机器实现清洁单面玻璃家外侧玻璃清洁起较麻烦危险外侧玻璃脏需清洗部分家庭户选择购买双面擦工具存问题：（1）双面擦工具说然达清洁玻璃两侧动清洗需工会占量时间（2）现清洁玻璃窗机器说两较问题：双面清洁问题远程操控问题双面清洁机器然国外已着较成熟技术已中国情况容乐观远程控制远程控制清洁玻璃机器说创新点需手接触控制高玻璃需手机者遥控器控制清洁动清洁需动钮两问题现清洁窗玻璃机器面问题相信解决两问题程度推动国智家居发展
2总体设计方案
21设计概述
设计关家双面湿擦玻璃窗机器设计确定机器达功达效果远程控制方面进行研究分析设计结合智化控制功家双面湿擦玻璃窗机器够具备手机端远程操控功鉴智家居系统通连接WiFi网络操控家电器结合WiFi模块手机端微信程序应进行设计研究中微信程序开发NodeMcuWiFi模块Arduino 环境C语言编辑代码程序NodeMcu互相通信中微信程序通软件微信开发者工具实现开发WiFi模块基Arduino环境C语言语法进行编程两者互相通信通分连接阿里云物联网服务器实现互相通信面介绍设计程包括软件选择代码编写功实现介绍等
22设计求
第：NodeMcu开发板代码编写运行调试成功实现服务器连接达初步控制
第二：微信程序脚代码编写运行调试模拟成功发布前电脑开发软件模拟器中成功连接服务器
第三：电脑开发微信软件中模拟控制调试实现达初步控制效果
第四：微信程序成功传发布出手机端显示正常
第五：通手机微信开程序实现控制NodeMcu连接继电器模块成功控制继电器LED灯显示状态
23方案设计计划
第：学开发微信程序脚语言基础
第二：微信程序开发学练
第三：NodeMcu WiFi开发板熟悉选择编程环境编程语言类型
第四：完成开发板编程
第五：设计程序
第六：手机端运行程序检测运行否正常
第七：利8路继电器模块LED灯显示状态模拟检测否实现功
第八：程序发布线（需点时间发布失败通预览程序手机手机端控制开发板）
第九：手机控制继电器LED灯显示
24总体设计思路
工作程分析：
（1）NodeMcu通电动连接网络服务器
（2）开微信程序动连接服务器
（3）开关钮发送指令服务器
（4）服务器发送指令NodeMcu端触发执行程序达控制目
设计中先NodeMcu开始研究设计采购开发板根相关资料熟悉工作环境编程环境然弄清服务器连接关键点接着弄清楚微信程序服务器间连接研究服务器连接关键点研究两者间服务器连接MQTT协议（该协议连接物联网协议中TCP协议IP协议方便实现服务器连接选协议协议起两种协议说较简单轻量范围广目前已广泛应）研究控制原理
设计框架思路图：

图 21 设计框架
25实现功GPIO分配
设计设计清洁玻璃窗机器功实现八分手动清洁模式动清洁模式中手动清洁模式前进退左转右转停止返回六运动状态控制中需点击应开关钮实现控制机器八运动状态点需说明进行手动动模式切换时动模式必须保证关闭手动模式手动模式里全部功开关手动模式确保关闭动模式功模式应着NodeMcu模块端口引脚GPIO口继电器引脚代表着机器功接口面表格：
表21 功端口引脚分配
功
WiFi模块引脚
模块GPIO口
继电器引脚
手动
D0
GPIO16
CH1
动
D1
GPIO5
CH2
前进
D2
GPIO4
CH3
退
D4
GPIO2
CH4
左转
D5
GPIO14
CH5
右转
D6
GPIO12
CH6
停止
D7
GPIO13
CH7
返回
D8
GPIO15
CH8
3设计原理介绍
31工作原理
设计工作原理通触发NodeMcu开发板PWN功间switch函数定义PWN功函数实现触发刚开始时设置端口输出低电触发次switch输出高电次触发输出低电反复电信号呈现矩形波形式PWN波形程序发送数服务器服务器发送数NodeMcu达触发程序执行程序NodeMcu通MQTT协议应设备三元组进行连接阿里云物联网服务器达互相通信控制目
32微信程序开发原理介绍
微信程序程序种实微信程序质单页面web应表现半APP半web APP微信程序运行时浏览器模式运行托微信程序系统微信微信理着微信程序生命周期页面呈现事件处理页面中调种原生接口微信程序操作环境基浏览器核重建置解析器程序没DOMBOMAPI 三操作环境台：Apple开源浏览器核Android X5（QQ浏览器核）开发nwjs（C ++实现Web桌面应程序）
微信程序开发步骤概分面：
（1）首先获取微信程序APPID浏览器登录微信公众台程序页面注册账号开发设置选项里查微信程序APPID作开发程序身份认证
（2）微信开发者工具软件创建新项目保存路径必须空文微信程序开发中两种开发模式种云开发模式种非云开发模式云开发模式指开发微信程序前官方开发文档提供三基础力：云函数云存储云数库开发者云开发模式开发程序时程序demo直接开发文档云开发demo云开发API等非云开发模式没应函数存储数库需开发者准备
（3）创建页面开新建项目资源理器pages文件夹两文件夹index文件夹logs文件夹两文件夹应着两页面显示源代码文件夹想页面pages文件新建文件新创建文件需写入appjson文件中页面代码行中
完成前三步骤编辑程序代码中js缀文件脚文件json缀文件配置文件wxss缀文件样式表文件wxml缀文件页面结构文件文件中写入相应代码然进行编译编译成功模拟器会显示设计界面实现具体功编译成功点击传代码进入微信程序官方网站提交代码进行审核发布发布成功
程序部代码结构：
（1）json配置文件：json种数格式种编程语言程序中json静态配置中appjson前微信程序页面全局配置包括微信程序页面路径界面性网络超时时间底部选项卡等pages字段描述微信程序页面路径定义创建窗口字段定义程序页面顶部背景颜色文颜色pagejson独立定义页面某属性例顶部颜色否拉刷新页面等等json语法括号{}中容keyvalue方式表发数key必须包裹双引号中定义数组需方括号[ ]包裹定义象需括号{}括起需注意json文件代码编写进行注释强行加注释会代码编译时候出现错误
（2）wxml模板文件：wxml模板文件标签属性等组成作描述页面前结构页面显示容标签包括view button text 等等属性包括wxforwxifclass等{{ }} 表达式等等
（3）wxss 样式文件：wxss 全称WeiXin Style Sheets种样式语言描述 wxml组件样式例显示样式字体颜色文样式外边距边距边框显示元素颜色等中尺寸单位中支持rpx单位适应手机设备屏幕进行宽度设备素换算进行全局样式局部样式设计
（4）js脚逻辑文件：语法JavaScript通编写脚文件代码实现响应户点击事件触发等等户进行交互定义函数等进行必注释利 者* *符号中JavaScript属种脚语言称js实现户进行交互设计代码部分JavaScriptJava相语言差异：Java种面象语言JavaScript种脚语言基象事件驱动编程语言Java中变量必须事先声明js变量声明必须声明局部变量全局变量否会容易造成混淆代码格式Javajs编写中语法C语言类型赋值运算符表达式if函数for循环等
33 NodeMcu WiFi模块介绍工作原理
NodeMcu称ESP8266Arduino IDE核心基ESP8266开发板具超高集成度超低功耗低成尺寸特点具GPIOPWMI2C1WireADC等功包含包含usb串口10 GPIO引脚置PCB天线WiFi接受模块相ESP8266芯片NodeMcu基础增加标准电路板功更加完善NodeMcu开发板带连接芯片USB端口硬件复位RST钮写入程序FLASH钮Wifi天线LED灯插入电路面包板标准尺寸GPIO引脚中NodeMcu 包括官方开源固件NodeMcu开源编程基LuaArduino环境设计中购买开发板版NodeMcu CH340选择基Arduino环境c语言编程ESP8266芯片版ESP826612F开发板UARTWiFi 透传模块通编写相关代码开发板连接WiFi网络物联网服务器连接服务器发送指令开发板开发板执行相关程序达控制第步然结合手机应（包括APP者微信程序）达远程控制功
NodeMcuESP8266芯片样具softAPstationsoftAP+station三种模式SoftAP线接入点模式ESP8266softAP模式工作时发出WIFI热点信号相身变成路器诸手机计算机类设备连接ESP8266热点组成局域网station模式模式连接手机电脑者路器WiFi信号应网络通信设备通讯中softAP +station前面两模式混合模式作路器连接外部WiFi次设计中station模式连接手机发出热点
面应实物图开发板引脚图：

图 31 NodeMcu开发板

图 32 引脚图
34 程序NodeMcu互通信原理
微信程序NodeMcu间相互通信原理分连接阿里云IoT服务器台然通MQTT协议程序服务器发送数通服务器数转发NodeMcu达互相通信目实现程序设备控制NodeMcu设备实现NodeMcu微信程序发送消息
阿里云物联网服务器台：该台提供设备间连接通讯功服务器通云端动调API命令发送设备实现远程控制物联网台提供2G 3G 4GNBIoTLoRaWANWiFi等网络设备访问解决方案方便户选择提供具种协议设备端SDK 诸MQTTCoAPHTTP S等满足长连接实时性求满足短连接低功耗求提供设备线离线更改通知服务便实时获取设备状态状态信息方便实时查产品应ProductKey设备应ProductKeyDeviceNameDeviceSecretProductKeyDeviceNameDeviceSecret称设备三元组设备连接IoT台基础定义规引擎中云产品流物联网台根户配置数流规指定TopicTopic消息指定字段传输目进行存储计算处理数转发设备Topic实现设备间通信功
MQTT协议：MQTTIBM开发时通信协议连接物联网通信协议基TCP发布订阅协议该设计初目极限存储设备低带宽网络通信MQTT具种消息类型包括连接服务器CONNECT发布消息PUBLISH等NodeMcu中提供mqtt模块函数连接服务端发布消息订阅消息等具轻量传输TCPIP提供网络连接等特性MQTT信息基Topic信息发布发布时候需发布前指定Topic信息MQTT协议定义两种类型象：发布服务器客户端中发布服务器通信系统核心客户端指信息中产生接受端MQTT运行程某设备端通subscribe发布服务器声明订阅Topic信息然客户端通发布题信息发布发布服务器中发布服务器信息转发订阅Topic客户端发布服务器连接客户端实现设备间通讯
设计中微信程序通JS文件中声明编辑订阅发布TopicNodeMcu通定义订阅发布Topic物联网服务器相MQTT发布服务器NodeMcu模块电连接网络通MQTT消息类型connect应三元组信息连接服务器服务器声明订阅Topic信息微信程序样方法连接物联网服务器服务器发布Topic信息服务器微信程序发布Topic信息转发NodeMcu设备端时反实现微信程序NodeMcu间相互通讯简单说微信程序NodeMcu发送信息接收NodeMcu发送出信息NodeMcu端样道理发送信息接收信息
图设计通MQTT协议进行两者间通信原理图：

图 33 通信原理图
4 软件介绍
41 微信开发者工具软件
微信开发者工具软件微信推出官方开发软件开发程序游戏插件等开发代码编辑调试预览传程序等功外微信官方团队发布微信开发设计指南开发文档开发文档中代码demo直接程序采云开发采云开发两种模式进行开发微信开发软件里面功区三：模拟器调试器程序代码编辑区

图 41 软件界面
模拟器：顾名思义模拟程序手机状态完成代码编辑点击运行者刷新模拟器见程序显示样式通鼠标模拟器模拟手机触屏通点击鼠标调试事件函数否利实现功保证达开发者情况传发布

图 42 模拟器界面
调试器：调试器分ConsoleSourcesNetworkSecurityMockAppdataAuditsSensorStorageTraceWxml十功模块Console 功输入调试代码运行微信程序输出信息错误信息连接信息者JS编辑显示信息Sources模块显示脚文件代码define函数里Console显示出代码行出现错误时点击Console显示代码路径调试器会跳转Sources模块错误代码行显示出供检查修改Network观察显示requestsocke请求状态AppdataAppdata特定数显示前项目前时间实时反馈项目数处编辑数时反馈界面数需模块知

图 43 调试器
程序开发代码编辑区：代码编辑区微信开发软件功区文件代码功区编辑代码格式编辑错误时会立显示错误信息出现红色线条提示
图 44 代码编辑区资源理器界面
微信开发者工具预览功点击预览通扫描二维码手机预览程序相样板程序没正式发布传功传编辑代码微信程序官网提交审核发布模拟器代码编辑区间资源理器显示程序文件夹文件JS文件JSON文件等
42 Arduino IDE编程软件
Arduino简单易开源电子原型台具类似JavaC语言处理接线开发环境包括硬件（Arduino开发板）软件Arduino IDE欧洲开发团队2005年冬季开发成员包括Massimo BanziDavid CuartiellesTom IgoeGianluca MartinoDavid MellisNicholas ZambettiArduino IDE软件具跨台简单明开放性快速开发等特点WindowsMacintosh OS XLinux三种流操作系统运行数控制器Windows开发
款软件编程烧录代码较简单快捷烧录传速度快烧录前先进行运行检查代码正常运行设计选Arduino IDE软件编写代码编写前需软件里面搭建ESP8266NodeMcu开发环境该软件环境安装目录安装ESP8266环境文件成功搭建编写传烧录代码图Arduino IDE软件界面：

图 45 Arduino IDE软件界面
5设计流程
材料： NodeMcu WiFi模块8路继电器（8端口8继电器相8继电器开关设计继电器作模拟检测开发板否利输出信号）杜邦线USB数线开发软件（微信开发者工具Arduino IDE）需环境搭建文件（需ArduinoIDE软件中搭建ESP8266编程环境正常传代码）等

图 51 材料
51 硬件编程设计
（1）服务器选择环境创建：设计选择阿里云物联网服务器台作相程序开发板间桥梁连接两者相互通讯
服务器环境搭建：首先登陆阿里云官网物联网台创建产品设计创建名称NodeMcu2产品连接网络方式WiFi数格式ICA 标准数格式（Alink JSON）然基刚刚创建产品创建两设备设备微信程序端设计创建名称WeixinNodeMcu硬件端设计名称命名nodemcu2创建两设备作实现两者间通讯两设备三元组信息作分实现软件硬件端连接服务器

图 52 创建产品

图 53 微信端设备
（2）建立设备间通讯：物联网台中先建立微信程序端发布Topic产品Topic列表中找定义Topic钮定义发布Topic然规引擎中云产品流传选项卡中创建规规数格式二进制编写SQL微信程序端处理数添加操作实现转发数NodeMcu设备记住订阅号Topic

图 54 通讯规创建
（3）ESP8266编程环境设置：开Arduino IDE开始配置ESP8266编程环境菜单卡首选项中找安装Arduino IDE软件环境软件文件夹准备ESP8266环境文件复制文件夹里设计中该文件夹路径C＼Users＼Administrator＼AppData＼Local＼Arduino15然重启软件重启工具→开发板里选择nodemcu10（ESP12E module）需Arduino IDE软件加入物联网需第三方库第三方库提前准备环境文件第三方库网找资源然第三方库文件放Arduino IDE软件安装目录libraries文件夹里次重启软件进行代码编写
（4）代码编写：解Arduino IDE软件代码编写语言C语言结合学知识进行源代码编写中里面包括重代码行WiFi网络连接定义定义手机WiFi热点名字密码然定义连接阿里云服务器利前物联网台创建nodemcu2三元组信息定义服务器台创建接受消息传数Topic面连接WiFi代码编写利WiFimode语句WiFibegin语句利mqtt_callback函数接受数指针byte *payload数幅值参数PWN功封装参数通mqtt协议connect消息类型连接物联网服务器需设备三元组信息实现连接编写函数分编写NodeMcu引脚功NodeMcu引脚设置通pinMode( )输出输出模式利digitalWrite( )引脚初始化状态设低电low编写PWN功函数通switch循环语句实现PWN功开关开启时发送数PWN功函数接受数触发端口赋值高电关闭时次接受数端口赋值低电PWN功实现
（5）传代码：安装NodeMcu CH340驱动（设计开发板版）USB数线连接NodeMcu连接电脑Arduino IDE工具栏中端口选项选择应端口连接NodeMcu然点击传钮进行传代码传成功NodeMcu动连接定义WiFi网络动连接物联网服务器端

图 55 NodeMcu程序流程图
52微信程序开发设计
（1）通微信开发者工具软件新建程序项目学开发程序JS语言进行开发控制NodeMcu开发板程序中需两JavaScript语言库MQTT协议库aliyuniotclientsdk官方库hmacsha1算法库两库官网载两库文件复制项目utils目录中然utils目录搭建连接阿里云物联网js文件Page文件indexlog文件应两界面
（2）编写控制界面交互代码：indexjs文件中进行户交互设计利MQTT协议实现程序连接物联网台应data中定义端口通编写定义阿里云物联网台创建微信程序端设备三元组信息定义发布订阅Topic实现连接服务器NodeMcu实现通讯然定义函数实现程序拉刷新连接物联网服务器定义开关触发事件物联网服务器端发送应数编写需注意格式编写格式严格JavaScript格式求规范代码行结尾时候引号分开需注意代码行结尾符号出现格式问题软件会动提示修改部分demo较复杂参考学demo编写进行代码编写demo引微信开发文档
（3）编写控制界面显示样式代码：wxml文件中利viewtextimageswitch等组件进行编写然wxss文件中编写界面显示样式利class{}格式固定CSS组件编写程中手机型号需编写完成编译代码模拟器查显示效果出现异常显示应代码进行修改直显示出较效果图编写显示样式效果：

图 56 控制界面
（4）编写信息界面代码：logjs文件中编写显示设计课题题目指导老师组员信息研究容然设计信息界面显示样式显示出较美观界面编写代码方式编写控制界面代码样样需断编写运行检查修改界面更加美观

图 57 程序信息界面
（5）编译代码检查问题做出应修改传代码微信程序官网中提交审核发布

图 58 发布程序


6调试程
NodeMcu引脚通杜邦线接出8输出端口序连接继电器端口引脚路继电器应LED灯应LED灯点亮时表示继电器正常闭合继电器LED灯否亮起模拟检测开发板否利输出信号
61微信程序调试
（1）编译代码
点击微信开发者工具编译钮者通电脑键盘保存调试器Console控制台印出三元组信息控制界面显示连接成功没弹出错误信息物联网台应设备显示线编译成功
（2）开关事件调试
动开关钮调试器Console控制台显示D1次动开关控制台次显示D1退开关控制台显示D4次退开关控制台次显示D4剩6开关进行检测控制台均显示应引脚端口号Console没显示错误信息算调试成功
（3）拉刷新连接
鼠标放模拟器界面模拟手指拉界面出现刷新标志控制台动刷新次次显示三元组信息应域名网址等信息成功实现拉刷新功
（4）点击模拟器中程序信息钮页面跳转信息页面正常显示编辑信息

微信程序控制界面部分程序：
indexjs文件data设置需发送指令NodeMcu端口定义名称
Page({
data{
rightIOname  [{ name D0id 10  }] 手动
rightIOname1 [{ name D1id 11  }] 动
rightIOname2 [{ name D2id 12  }] 前进
rightIOname3 [{ name D4id 14  }] 退
rightIOname4 [{ name D5id 15  }] 左转
rightIOname5 [{ name D6id 16  }] 右转
rightIOname6 [{ name D7id 17  }] 停止
rightIOname7 [{ name D8id 18  }] 返回

通生成微信程序设备三元组信息连接阿里云物联网服务器
aliyunInfo {
productKey ＇xxxxxxxxxxx＇  三元组信息
deviceName ＇xxxxxxxx＇  三元组信息
deviceSecret ＇xxxxxxxxxxx＇  三元组信息
regionId ＇cnshanghai＇
pubTopic ＇a1aTpCasBXdWeixinuserweixin＇  发布消息Topic
subTopic ＇a1aTpCasBXdWeixinuserget＇  订阅消息Topic
}
}
定义拉界面刷新数函数实现刷新数重新连接服务器
onPullDownRefresh function () {
that  this 定义全局变量
let clientOpt  aliyunOptgetAliyunIotMqttClient({
productKey thatdataaliyunInfoproductKey
deviceName thatdataaliyunInfodeviceName
deviceSecret thatdataaliyunInfodeviceSecret
regionId thatdataaliyunInforegionId
port thatdataaliyunInfoport
})
consolelog(clientOpt)
consolelog(get data + JSONstringify(clientOpt))
let host  ＇wxs ＇ + clientOpthost
consolelog(get data + JSONstringify(clientOpt))
thissetData({
＇optionsclientId＇ clientOptclientId
＇optionspassword＇ clientOptpassword
＇optionsusername＇ clientOptusername
})
consolelog(网址 + host) 控制台显示网址
consolelog(thisdataoptions data + JSONstringify(thisdataoptions))


thisdataclient  mqttconnect(host thisdataoptions)
consolelog(thisdataclient)
thisdataclienton(
＇connect＇
function (connack) {
wxshowToast({
title ＇连接成功＇ 弹出显示连接成功
})
}
)
consolelog()
consolelog(thatdataclienton)

thatdataclienton(message function (Topic payload) {
consolelog( 收 Topic + Topic +   payload  + payload)
wxshowModal({
content  收Topic[ + Topic + ] payload [ + payload + ]
showCancel false
})
})

发送数事件定义剩7事件定义样名称端口号发送数D0应发送0D1应发送1次类推
hand(e) {
var value  edetailvalue
var propertyName  ecurrentTargetdatasetpropertyName
consolelog(propertyName)
if (value   true && propertyName   D0) {
thatsendCommond(0)

} else if (value   false && propertyName   D0) {
thatsendCommond(0)
}
}

控制界面显示容wxml程序bindchange应事件名称点击开关会触发事件backgroundpage背景图显示wxfor作循环遍历循环遍历显示JS文件中定义数组wxkey表示唯标识iddivLine显示分割线余类似编写



手动 {{isChecked1}}







62综合调试
NodeMcu调试：开发板应端口引脚继电器引脚相连接电源NodeMcu蓝色LED灯保持常亮NodeMcu说D4端口处低电时蓝色LED灯亮起处高电时熄灭开手机WiFi热点显示NodeMcu开发板连接手机热点设备名称ESP_F94DE6
NodeMcu保持供电微信开发者工具模拟器中开程序等显示连接成功连接成功点击应功开关继电器应LED灯亮起说明开关程序发送数物联网服务器服务器转发NodeMcu端触发NodeMcu部程序实现控制微信开发者工具点击预览钮等传出现二维码手机扫描二维码手机开发版程序查切正常通手机进行应功开关操作实现点亮继电器应LED灯运行中实现次点击关闭直保持运行状态
NodeMcu部程序：
定义需连接WiFi名称密码
#define WIFI_SSID xxxxxx WiFi名称
#define WIFI_PASSWD xxxxxxx WiFi密码

定义连接阿里云物联网服务器设计创建产品设备三元组
#define PRODUCT_KEY xxxxxxx 设备product_key
#define DEVICE_NAME xxxxxxxxxx 设备device_name
#define DEVICE_SECRET xxxxxxxxxxxx 设备device_secret

连接WiFi函数
void init_wifi(const char *ssid const char *password)
{
WiFimode(WIFI_STA)
WiFibegin(ssid password)
while (WiFistatus() WL_CONNECTED)
{
Serialprintln(WiFi does not connect try again )
delay(500) 延时500
}

Serialprintln(Wifi is connected) 写入显示WiFi已连接
Serialprintln(IP address )
Serialprintln(WiFilocalIP())
}

MQTT协议连接NodeMcu设备三元组信息阿里云物联网服务器
void mqtt_check_connect(){
while (mqttClientconnected())
{
while (connect_aliyun_mqtt(mqttClient PRODUCT_KEY DEVICE_NAME DEVICE_SECRET))
{
Serialprintln(MQTT connect succeed)
mqttClientsubscribe(ALINK_TOPIC_PROP_SET) 引定义Topic
Serialprintln(subscribe done)
}
}
}

服务端发送数触发函数实现PWN功
void IO(char a){
switch(a){
case＇0＇if(digitalRead(D0)){digitalWrite(D0LOW)}else{digitalWrite(D0HIGH)}break
case＇1＇if(digitalRead(D1)){digitalWrite(D1LOW)}else{digitalWrite(D1HIGH)}break
case＇2＇if(digitalRead(D2)){digitalWrite(D2LOW)}else{digitalWrite(D2HIGH)}break
case＇3＇if(digitalRead(D3)){digitalWrite(D3LOW)}else{digitalWrite(D3HIGH)}break
case＇4＇if(digitalRead(D4)){digitalWrite(D4LOW)}else{digitalWrite(D4HIGH)}break
case＇5＇if(digitalRead(D5)){digitalWrite(D5LOW)}else{digitalWrite(D5HIGH)}break
case＇6＇if(digitalRead(D6)){digitalWrite(D6LOW)}else{digitalWrite(D6HIGH)}break
case＇7＇if(digitalRead(D7)){digitalWrite(D7LOW)}else{digitalWrite(D7HIGH)}break
case＇8＇if(digitalRead(D8)){digitalWrite(D8LOW)}else{digitalWrite(D8HIGH)}break
}
}

Case函数中事件应NodeMcu引脚执行功表表示：
表61 case应引脚功
case事件
模块引脚
执行功
0
D0
手动
1
D1
动
2
D2
前进
3
D3

4
D4
退
5
D5
左转
6
D6
右转
7
D7
停止
8
D8
返回

63实物图部分调试结果图
手机开程序截图实物连接图：

图 61程序实物设备
部分调试结果图：

图 62 停止

图 63 前进右转

图 64 动模式
7结
71设计总结
设计面智家居设计家双面湿擦玻璃窗户机器相前家庭智设备采APP远程控制受手机版影响导致法正常设计采微信程序实现远程控制具跨台需安装轻量启动速度快等特点担心会会手机版型号等问题影响微信软件开进行操作控制方面网络实现控制控制距离受限制微信程序NodeMcu间通物联网台连接达远程控制效果微信程序离开发板远开发板通电接网络开微信程序动连接物联网服务器连接成功便实现控制远程控制性更加稳定更加优化户体验更优化整设计成较低
72设计创新
（1）通微信程序控制擦玻璃窗机器控制机器8运动状态转变相APP控制更加灵活便捷
（2）采物联网服务台进行设备间通讯实现远程控制
（3）采连接WiFi网络实现联网相蓝牙连接更加稳定连接距离更远
（4）户体验优化开动连接物联网服务器增加拉刷新重新连接体验连接稳定时便户操作退出重启程序需拉刷新重新连接
73设计足处
（1）电前需先NodeMcu开发板D4端口进行断开操作开发板通电然D4连接解决方案D4接线间设计连接钮钮初始状态断开时通电启动钮D4钮接通实现控制机器全功体验
（2）安卓手机连接服务器较稳定苹果手机会连接稳定情况
（3）手机屏幕分辨率差异屏幕较手机显示太美观屏幕手机显示显留白
（4）中模式执行程中时必须手动停止切换模式
74展
时钟未停止转动类前进步伐未停止智化社会迟早会智家居作未必然发展趋势家电器实现智化网络手机等通讯设备远程操作家电器启动提高户体验效率提升型机器方面擦玻璃机器扫机器等然已智化设备存体验足结构足等时间推动渴更方便高效智生活会推动完善目前足处微信程序作款轻量级应程序体验APP相丝毫差甚APP更加方面灵活相信程序会未断完善断进步代APP应处导位未智化信息化动化未科技社会发展必然趋势断着方发展相信久未会实现目标




参考文献
[1] 范兴隆 ESP8266智家居监控系统中应[J] 单片机嵌入式系统应 2016 016(009)5256
[2] 屈良潘唐曼玲刘静等 基ESP8266LED灯线远程控制设计[J] 电子世界 2017(9)
[3] 吴允强吴松基ESP8266智家居控制系统设计[J] 电子测试 2017(21)
[4] 顾亚文．基MQTT协议通智家居系统设计实现[D]．西安：西安电子科技学2014．
[5] 王浩 王东基NodeMCU固件台RGB三色灯远程控制设计实现[J] 软件工程 2017(5)
[6] 郝建龙基磁吸附双面擦玻璃机器设计[D]．河北：河北工业学学2016．
[7] 刘玉佳微信程序开发系统实现前景分析[J] 信息通信 2017(1)
[8] 武思怡解佺张雨等 微信程序开发研究[J] 线互联科技2018 v15No135(11)5860
[9] 邱宏斌种基ESP8266模块物联网设计思路[J]电子世界 2017(7)
[10] 王硕智家居中玻璃窗动清洗装置研制[D]．连：连工业学2012．
[11]明日科技JavaScript入门精通[M]第3版清华学出版社2019
[12] 谭浩强CC++程序设计教程[M]高等教育出版社2001


















附 录
附录1程序源码
NodeMcu端源码：
#include
#include
#include
#include
#include aliyun_mqtth

连接wifi手机热点
#define WIFI_SSID MEIZU 16 X
#define WIFI_PASSWD 25241liuwendong

定义连接阿里云物联网服务器创建产品设备三元组
#define PRODUCT_KEY a1aTpCasBXd
#define DEVICE_NAME nodemcu2
#define DEVICE_SECRET CjWYHBelWeV2wPi5rbvZ0g0jKowJOM3Z

定义固件接受传数topic
#define DEV_VERSION STHWIFIv1020190220 定义固件版信息
#define ALINK_BODY_FORMAT {＼id＼＼123＼＼version＼＼10＼＼method＼＼s＼＼params＼s}
#define ALINK_TOPIC_PROP_POSTRSP sys PRODUCT_KEY DEVICE_NAME thingeventpropertypost_reply
#define ALINK_METHOD_PROP_POST thingservicepropertyset
#define ALINK_TOPIC_DEV_INFO otadeviceinform PRODUCT_KEY DEVICE_NAME
#define ALINK_VERSION_FROMA {＼id＼ 123＼params＼ {＼version＼ ＼s＼}}
#define ALINK_TOPIC_PROP_SET PRODUCT_KEY DEVICE_NAMEusernode 接收消息TOPIC
#define ALINK_TOPIC_PROP_POST PRODUCT_KEY DEVICE_NAMEusernodemcuLWD 传数TOPIC

unsigned long lastMs 0
int pos 90

WiFiClient espClient
PubSubClient mqttClient(espClient)

连接WiFi
void init_wifi(const char *ssid const char *password)
{
WiFimode(WIFI_STA)
WiFibegin(ssid password)
while (WiFistatus() WL_CONNECTED)
{
Serialprintln(WiFi does not connect try again )
delay(500)
}

Serialprintln(Wifi is connected)
Serialprintln(IP address )
Serialprintln(WiFilocalIP())
}

mqtt接受数函数byte *payload指针
void mqtt_callback(char *topic byte *payload unsigned int length)
{
Serialprint(Message arrived [)
Serialprint(topic)
Serialprint(] )
payload[length] ＇＼0＇

Serialprintln((char *)payload)
char a *payload 指针里数出赋值a
Serialprint(接收a)
Serialprintln(a)
int b *payload
Serialprint(接收b)
Serialprintln(b)
IO(a) PWN功
}

利MQTT协议连接阿里云物联网服务器
void mqtt_check_connect(){
while (mqttClientconnected())
{
while (connect_aliyun_mqtt(mqttClient PRODUCT_KEY DEVICE_NAME DEVICE_SECRET))
{
Serialprintln(MQTT connect succeed)
mqttClientsubscribe(ALINK_TOPIC_PROP_SET) 引定义topic
Serialprintln(subscribe done)
}
}
}

void mqtt_interval_post()
{
char param[512]
char jsonBuf[1024]
sprintf(param {＼LightSwitch＼d＼CurrentTemperature＼d} digitalRead(D4)random(055))
sprintf(jsonBuf ALINK_BODY_FORMAT ALINK_METHOD_PROP_POST param)
Serialprintln(jsonBuf)
mqttClientpublish(ALINK_TOPIC_PROP_POST jsonBuf) 传数topicjsonBuf传数
}

void setup()
{
pinMode(D0 OUTPUT)
pinMode(D1 OUTPUT)
pinMode(D2 OUTPUT)
pinMode(D3 OUTPUT)
pinMode(D4 OUTPUT)
pinMode(D5 OUTPUT)
pinMode(D6 OUTPUT)
pinMode(D7 OUTPUT)
pinMode(D8 OUTPUT)

digitalWrite(D0LOW)
digitalWrite(D1LOW)
digitalWrite(D2LOW)
digitalWrite(D3LOW)
digitalWrite(D4LOW)
digitalWrite(D5LOW)
digitalWrite(D6LOW)
digitalWrite(D7LOW)
digitalWrite(D8LOW)

Serialbegin(115200)
Serialprintln(Demo Start)

init_wifi(WIFI_SSID WIFI_PASSWD)
mqttClientsetCallback(mqtt_callback)
}

void loop()
{
if (millis() lastMs > 5000)
{
lastMs millis()
mqtt_check_connect()
}
mqttClientloop()
}

void IO(char a){
switch(a){
case＇0＇if(digitalRead(D0)){digitalWrite(D0LOW)}else{digitalWrite(D0HIGH)}break
case＇1＇if(digitalRead(D1)){digitalWrite(D1LOW)}else{digitalWrite(D1HIGH)}break
case＇2＇if(digitalRead(D2)){digitalWrite(D2LOW)}else{digitalWrite(D2HIGH)}break
case＇3＇if(digitalRead(D3)){digitalWrite(D3LOW)}else{digitalWrite(D3HIGH)}break
case＇4＇if(digitalRead(D4)){digitalWrite(D4LOW)}else{digitalWrite(D4HIGH)}break
case＇5＇if(digitalRead(D5)){digitalWrite(D5LOW)}else{digitalWrite(D5HIGH)}break
case＇6＇if(digitalRead(D6)){digitalWrite(D6LOW)}else{digitalWrite(D6HIGH)}break
case＇7＇if(digitalRead(D7)){digitalWrite(D7LOW)}else{digitalWrite(D7HIGH)}break
case＇8＇if(digitalRead(D8)){digitalWrite(D8LOW)}else{digitalWrite(D8HIGH)}break
}
}

程序控制界面代码：
连接阿里云发送数界面优化：
import mqtt from ＇utilsmqttjs＇
const aliyunOpt  require(＇utilsaliyunaliyun_connectjs＇)
let that  null
Page({
    data{
      rightIOname  [{ name D0id 10  }] 手动
      rightIOname1 [{ name D1id 11  }] 动
      rightIOname2 [{ name D2id 12  }] 前进
      rightIOname3 [{ name D4id 14  }] 退
      rightIOname4 [{ name D5id 15  }] 左转
      rightIOname5 [{ name D6id 16  }] 右转
      rightIOname6 [{ name D7id 17  }] 停止
      rightIOname7 [{ name D8id 18  }] 返回
      imageSrc＇pagesimagesbackgroundpng＇
      clientnull 记录重连次数
      reconnectCounts0
      options{
        protocolVersion 4  MQTT连接协议版
        clean false
        reconnectPeriod 1000  1000毫秒两次重新连接间间隔
        connectTimeout 30 * 1000  1000毫秒两次重新连接间间隔
        resubscribe true  果连接断开重新连接会次动订阅已订阅题（默认true）
        clientId ＇＇
        password ＇＇
        username ＇＇
      }

       连接阿里云物联网服务器
    aliyunInfo {
      productKey ＇a1aTpCasBXd＇ 
      deviceName ＇Weixin＇ 
      deviceSecret ＇2JsfegWEflfUYcME5HOVSrP1Y8EUieJv＇ 
      regionId ＇cnshanghai＇ 
      pubTopic ＇a1aTpCasBXdWeixinuserweixin＇  发布消息题
      subTopic ＇a1aTpCasBXdWeixinuserget＇  订阅消息题
      }
    }
    onPullDownRefresh function () {
      that  this
     
      let clientOpt  aliyunOptgetAliyunIotMqttClient({
        productKey thatdataaliyunInfoproductKey
        deviceName thatdataaliyunInfodeviceName
        deviceSecret thatdataaliyunInfodeviceSecret
        regionId thatdataaliyunInforegionId
        port thatdataaliyunInfoport port
      })
      consolelog(clientOpt)
      consolelog(get data + JSONstringify(clientOpt))
      let host  ＇wxs ＇ + clientOpthost
      consolelog(get data + JSONstringify(clientOpt))
      thissetData({
        ＇optionsclientId＇ clientOptclientId
        ＇optionspassword＇ clientOptpassword
        ＇optionsusername＇ clientOptusername
      })
      consolelog(网址 + host)
      consolelog(thisdataoptions data + JSONstringify(thisdataoptions))
  
      thisdataclient  mqttconnect(host thisdataoptions)
      consolelog(thisdataclient)
      thisdataclienton(
        ＇connect＇
        function (connack) {
          wxshowToast({
            title ＇连接成功＇
          })
        }
      )
      consolelog()
      consolelog(thatdataclienton)
  
      thatdataclienton(message function (topic payload) {
        consolelog( 收 topic + topic +   payload  + payload)
        wxshowModal({
          content  收topic[ + topic + ] payload [ + payload + ]
          showCancel false
        })
      })
       服务器连接异常回调
      thatdataclienton(error function (error) {
        consolelog( 服务器 error 回调 + error)
  
      })
       服务器重连连接异常回调
      thatdataclienton(reconnect function () {
        consolelog( 服务器 reconnect回调)
  
      })
       服务器连接异常回调
      thatdataclienton(offline function (errr) {
        consolelog( 服务器offline回调)
      })
      wxstopPullDownRefresh()
    }
    onPullDownRefresh function () {
      that  this
     
      let clientOpt  aliyunOptgetAliyunIotMqttClient({
        productKey thatdataaliyunInfoproductKey
        deviceName thatdataaliyunInfodeviceName
        deviceSecret thatdataaliyunInfodeviceSecret
        regionId thatdataaliyunInforegionId
        port thatdataaliyunInfoport port
      })
      consolelog(clientOpt)
      consolelog(get data + JSONstringify(clientOpt))
      let host  ＇wxs ＇ + clientOpthost
      consolelog(get data + JSONstringify(clientOpt))
      thissetData({
        ＇optionsclientId＇ clientOptclientId
        ＇optionspassword＇ clientOptpassword
        ＇optionsusername＇ clientOptusername
      })
      consolelog(网址 + host)
      consolelog(thisdataoptions data + JSONstringify(thisdataoptions))
  
  
      thisdataclient  mqttconnect(host thisdataoptions)
      consolelog(thisdataclient)
      thisdataclienton(
        ＇connect＇
        function (connack) {
          wxshowToast({
            title ＇连接成功＇
          })
        }
      )
      consolelog()
      consolelog(thatdataclienton)
  
      thatdataclienton(message function (topic payload) {
        consolelog( 收 topic + topic +   payload  + payload)
        wxshowModal({
          content  收topic[ + topic + ] payload [ + payload + ]
          showCancel false
        })
      })
       服务器连接异常回调
      thatdataclienton(error function (error) {
        consolelog( 服务器 error 回调 + error)
  
      })
       服务器重连连接异常回调
      thatdataclienton(reconnect function () {
        consolelog( 服务器 reconnect回调)
  
      })
       服务器连接异常回调
      thatdataclienton(offline function (errr) {
        consolelog( 服务器offline回调)
      })
      wxstopPullDownRefresh()
    }
  
    onLoad function () {
      that  this
      let clientOpt  aliyunOptgetAliyunIotMqttClient({
        productKey thatdataaliyunInfoproductKey
        deviceName thatdataaliyunInfodeviceName
        deviceSecret thatdataaliyunInfodeviceSecret
        regionId thatdataaliyunInforegionId
        port thatdataaliyunInfoport port
      })
      consolelog(clientOpt)
      consolelog(get data + JSONstringify(clientOpt))
      let host  ＇wxs ＇ + clientOpthost
      consolelog(get data + JSONstringify(clientOpt))
      thissetData({
        ＇optionsclientId＇ clientOptclientId
        ＇optionspassword＇ clientOptpassword
        ＇optionsusername＇ clientOptusername
      })
      consolelog(网址 + host)
      consolelog(thisdataoptions data + JSONstringify(thisdataoptions))
    
      thisdataclient  mqttconnect(host thisdataoptions)
      consolelog(thisdataclient)
      thisdataclienton(
        ＇connect＇
        function (connack) {
          wxshowToast({
            title ＇连接成功＇
          })
        }
      )
      consolelog()
      consolelog(thatdataclienton)
  
      thatdataclienton(message function (topic payload) {
        consolelog( 收 topic + topic +   payload  + payload)
        wxshowModal({
          content  收topic[ + topic + ] payload [ + payload + ]
          showCancel false
        })
      })
       服务器连接异常回调
      thatdataclienton(error function (error) {
        consolelog( 服务器 error 回调 + error)
  
      })
       服务器重连连接异常回调
      thatdataclienton(reconnect function () {
        consolelog( 服务器 reconnect回调)
  
      })
       服务器连接异常回调
      thatdataclienton(offline function (errr) {
        consolelog( 服务器offline回调)
      }) 
    }

hand(e) {
      var value  edetailvalue
      var propertyName  ecurrentTargetdatasetpropertyName
      consolelog(propertyName)
     if (value   true && propertyName   D0) {
        thatsendCommond(0)
        
      } else if (value   false && propertyName   D0) {
        thatsendCommond(0)
      }
}

auto(e) {
  var value  edetailvalue
  var propertyName  ecurrentTargetdatasetpropertyName
  consolelog(propertyName)
 if (value   true && propertyName   D1) {
    thatsendCommond(1)
  } else if (value   false && propertyName   D1) {
    thatsendCommond(1)
  }
}

goahead(e) {
  var value  edetailvalue
  var propertyName  ecurrentTargetdatasetpropertyName
  consolelog(propertyName)
 if (value   true && propertyName   D2) {
    thatsendCommond(2)
  } else if (value   false && propertyName   D2) {
    thatsendCommond(2)
  }
}

back(e) {
  var value  edetailvalue
  var propertyName  ecurrentTargetdatasetpropertyName
  consolelog(propertyName)
 if (value   true && propertyName   D4) {
    thatsendCommond(4)
  } else if (value   false && propertyName   D4) {
    thatsendCommond(4)
  }
}
  
turnleft(e) {
  var value  edetailvalue
  var propertyName  ecurrentTargetdatasetpropertyName
  consolelog(propertyName)
 if (value   true && propertyName   D5) {
    thatsendCommond(5)
  } else if (value   false && propertyName   D5) {
    thatsendCommond(5)
  }
}

turnright(e) {
  var value  edetailvalue
  var propertyName  ecurrentTargetdatasetpropertyName
  consolelog(propertyName)
 if (value   true && propertyName   D6) {
    thatsendCommond(6)
  } else if (value   false && propertyName   D6) {
    thatsendCommond(6)
  }
}

stop(e) {
  var value  edetailvalue
  var propertyName  ecurrentTargetdatasetpropertyName
  consolelog(propertyName)
 if (value   true && propertyName   D7) {
    thatsendCommond(7)
  } else if (value   false && propertyName   D7) {
    thatsendCommond(7)
  }
}

return(e) {
  var value  edetailvalue
  var propertyName  ecurrentTargetdatasetpropertyName
  consolelog(propertyName)
 if (value   true && propertyName   D8) {
    thatsendCommond(8)
  } else if (value   false && propertyName   D8) {
    thatsendCommond(8)
  }
}

  sendCommond(data) {
    let sendData  data

    if (thisdataclient && thisdataclientconnected) {
      thisdataclientpublish(thisdataaliyunInfopubTopic JSONstringify(sendData))

    } else {
      wxshowToast({
        title ＇请先连接服务器＇
        icon ＇none＇
        duration 2000
      })
    }
  }
})


控制界面显示容wxml：


  
    手动 {{isChecked1}}
   
  

  
    
  

  
    动 {{isChecked1}}
   
  

  
    
  

  
    前进 {{isChecked1}}
   
  

  
    
  

  
    退 {{isChecked1}}
   
  

  
    
  

  
    左转 {{isChecked1}}
   
  

  
    
  

  
    右转 {{isChecked1}}
   
  

  
    
  

  
    停止 {{isChecked1}}
   
  

  
    
  

  
    返回 {{isChecked1}}
   
  

  
    
  


附录2外文翻译
WeChat Mini Program Development Research
Wu Siyi Xie Yun Zhang Yu Hou Bingyun
(Xianyang Normal University School of Computer Xianyang 712000 Shaanxi)
Abstract The article briefly describes the mini program development process from the perspective of the developer from the environment and framework components API and other aspects were analyzed comprehensively several key points in the development of applets were introduced and the survival status and future development trends of applets were analyzed
Keywords WeChat applet framework API
The explanation of the mini program given by WeChat official is The mini program is an application that can be used without downloading and installing It realizes the dream of the application within reach The user can open the application by scanning or searching which also reflects With the concept of running away users do n’t need to worry about whether too many applications are installed Applications will be ubiquitous and available at any time but there is no need to install and uninstall [1] Since the WeChat applet was officially launched on January 9 2017 Causing widespread concern The WeChat team keeps updating the applet The advantages of the WeChat applet are obvious The applet touches the PC webpage public account H5 and APP where it ca n’t be touched It does not need to be installed and the concept of go and go can meet user needs and save mobile phone memory From the standpoint of the owner of the small program its development cost is greatly reduced and at the same time the powerful flow entrance of WeChat can be used which also reduces the difficulty of promotion In general the WeChat applet is a brandnew way which can better establish connections between users and services and can be easily obtained and spread in WeChat with a good user experience
1 Preparation before development
The applet uses the same parsing technology as React Native and Weex Developers can write a set of programs to run on a variety of clients At the same time they have a better native experience than the public account and the micro mall After the application is fully opened as developers of enterprises governments media other organizations or individuals you can apply for and register the applet The subscription number service number and enterprise number of applets and WeChat are parallel systems with independent registration and publishing processes
11 Applet access process There are four main steps for applet access
Applet registration register on the homepage of the official website of WeChat public platform (mp
Improve applet information Improve the basic information of applet such as name avatar and service scope Before development you need to bind the developer and obtain the APP ID to ensure that the program can be scanned through the mobile phone
Development of small programs Download and install WeChat developer tools WeChat official provides a complete development framework Developers can develop and debug small programs based on WeChat development documents
Code review and release After the small program is developed it cannot be released directly You need to submit the code and development configuration information for review and you can still release it after completion
12 WeChat Web Developer Tools
The officially announced WeChat development tools are called WeChat Web Developer Tools and the frontend development framework for small programs is the framework provided by WeChat officials The WeChat Web development tool is a framework based on the Native System system layer Since it is not running in a browser some methods such as Document and Window on the Web are not available In the past HTML5 was loaded in the network environment There will be restrictions you need to gradually load HTML CSS JS and then return the data and finally render the page and display it in the browser [2] Users always have to wait a long time which greatly reduces the user experience In contrast the two threads of the applet Appservice Thread and View Thread will be simultaneously loaded parallel loading and even Appservice Thread will be executed earlier when the view thread is loaded notify Appservice Appservice will use the prepared data setData The method returns to the view thread This optimization strategy for applets can reduce user waiting time and speed up the response speed of applets
The WeChat web developer tool is different from the H5 development tool + browser Device Mode preview mode but based on its own developer tool it can achieve a complete set of processes such as local file synchronization + development debugging + compilation preview + upload + release At the same time the applet has developed a set of WXML tag language and WXSS style language instead of directly using standard HTML5 + CSS3 At the same time many native APP components are provided The functions that need to be simulated before in HTML5 can be called directly in the applet to achieve the functions
2 Structure and its core technology
21 Framework
211 File structure of small program Use WeChat Web development tool to create a new project the framework will automatically generate an APP describing the overall program and multiple page files describing the page The complete applet consists of an entry file appjs a global style appwxss a global configuration appjson divides the page installation folder under the pages page there are 4 files on each page respectively View layer wxml file wxss file logical layer js file json file (page configuration not required)
appjs is a script file that controls the logic of the applet and appjson is the configuration file of the applet which is responsible for the global configuration of the applet appwxss is a global style sheet and its scope is every page of the project
wxml is a xmllike language with functions such as data binding conditional rendering list rendering custom templates event callbacks and external references pagewxml mainly builds the page structure by using basic components
The language of wxss and css format have the same used to describe the component style of wxml pagewxss has higher priority than Window of appjson At the same time WeChat adds a size unit rpx to the applet Rpx can be adaptive according to the screen width Rpx is actually a systemlevel rem (dividing the page by 750 copies in proportion 1rpx innerWidth 750)
pagejson can set some properties for independently defined pages to meet actual needs configjson can set some personalized configurations When reinstalling the tool or changing a computer as long as the same code package is imported the development tool will automatically restore to the personalized settings when developing this project
JS files are mainly used for user interaction and response to user clicks In the applet respond to user operations through JS scripts
212 Understanding the Mini Program Framework
The development of WeChat Mini Programs is based on a framework From a software design perspective the framework is a reusable software architecture solution that specifies the application architecture and clarifies all levels of the software architecture The perseverance relationship responsibility allocation and control flow between the components in the time and its level are represented by a set of interfaces abstract classes and methods of collaboration between instances which refers to the partial design and implementation of the application system in a specified application domain The overall structure of the subsystem [3]
The core of the applet development framework is a responsive data binding system Divided into view layer (View) and logic layer (APP Service) applet development tools provide view layer description languages ​​WXML and WXSS as well as JavaScriptbased logic layer framework and set the data transmission between the view layer and the logic layer The event system allows developers to easily focus on data and logic The place where transaction logic is handled is called the logic layer In the WeChat applet the collection of all js script files constitutes a logical layer The logic layer and the view layer cooperate with each other to complete data processing and receive event feedback The view layer of the framework is written by WXML and WXSS and displayed by components For the applet itself the collection of wxml files and wxss files constitutes the view layer After the data is processed by the logical layer it is sent to the view layer for interaction with the user and at the same time receives user feedback on the view layer The view layer presents data in a given style and feeds back events to the logic layer Data presentation is performed through components The basic composition of the view is the component
22 Related Components
WeChat provides a series of basic components which can be developed by using these basic components in combination Here are a few more characteristic components
Similar to
in HTML5 is the most basic component in the layout Any complicated layout can be achieved by nesting components is a block level The container component the default display block it is a box model display flex is generally recommended in the layout process