微信配网airkiss

对接天猫精灵的空气净化器是去年年底开始的,现在这个项目快结束了,所以在这里做一个总结。

        我的开发顺序是这样的:

        1. 服务端开发

        2. 设备端开发

        3. 微信端开发

        微信端开发主要包括微信注册和airkiss配网。这篇只说airkiss配网。先来看一下最终效果:

微信配网airkiss_第1张图片     微信配网airkiss_第2张图片     微信配网airkiss_第3张图片

       

     一、airkiss原理

    对于没有屏幕和键盘设备,没办法直接输入wifi和密码来联网,这时候就要借助其他设备(经常是手机)把wifi的ssid和password通过无线发送给设备来完成联网。首先,设置ESP8266以station的混杂模式运行(大概就是抓包后,不验证数据包的目的地址);然后,微信通过公众号(本文采用测试账号)把手机所连接的wifi的ssid和pwd发到空中;最后,ESP8266抓取包含wifi的ssid和pwd的数据包,得到wifi的用户名和密码,完成联网。

      二、开发步骤

      1. 服务器配置

      微信airkiss配网需要提供配网的移动端页面,用于展示设备配网的注意事项和wifi的ssid和pwd。所以,开发者需要有自己的服务器。微信是个严谨的app,不仅仅要填写进行服务器配置,还需要验证服务器的有效性。

       首先来做简单的服务器配置: 开发 -> 基本配置 -> 修改配置。其中url填写验证服务的URL,token随便写,如下图所示:

微信配网airkiss_第4张图片





        

微信配网airkiss_第5张图片

        然后,根据官方开发文档来编写验证服务器有效性程序。因为之前对接天猫精灵的服务器用的是PHP的workerMan框架,所以这次也用PHP来写。官方文档是这么写的:

微信配网airkiss_第6张图片

       大概意思就是,当我们点击基本配置的提交按键时,微信服务器会发送一个GET请求给服务器配置填写的URL,并且附带这几个参数:

signature 微信加密签名,signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数。
timestamp 时间戳
nonce 随机数
echostr 随机字符串

if (signature == sha1(token、timestamp、nonce进行字典排序后组成的string)),那么原样返回字符串 echostr,这样就验证了服务器的有效性。所以,如果想偷懒,直接原样返回echostr就可以了。至于具体的程序实现,网上可以搜到。现在就可以提交成功了。

       2. 自定义菜单

       自己的服务验证有效之后,这里存放的配置wifi的移动端网页就可以通过公众号访问了。但是,要怎么访问呢?比较多的做法是关注公众号之后,屏幕下方有个配网的菜单,点击它后就跳转到配置wifi的网页。这里有两种方法:一种是用程序,具体看官方开发文档。这里用另一种简单的方法:网页调试工具

      2.1 打开微信公众号技术文档,找到自定义菜单创建接口


    2.2 在右边内容最下面点击使用网页调试工具调试接口


    2.3 使用appID和appsecret得到access_token,如下图


    2.4 使用刚得到的access_token创建自定义菜单,name是自定义菜单名字,type必须是view, url填写配置wifi的网页URL,点击检查问题按键就成功了。可以登录这个公众号进行测试

        

        3. 配置wifi页面

         配置wifi页面的开发是这个阶段最难的一步。使用配网功能,需要用到官方提供的JS-SDK。根据官网文档,要使用JS-SDK需要实现以下几个步骤:

          一、绑定域名,这样这个域名下的网页才可以使用JS-SDK了

          二、引入JS文件,配网的页面程序上使用

你可能感兴趣的:(微信配网airkiss)