微信配网airkiss

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lys_xm/article/details/80514554
对接天猫精灵的空气净化器是去年年底开始的,现在这个项目快结束了,所以在这里做一个总结。

        我的开发顺序是这样的:

        1. 服务端开发

        2. 设备端开发

        3. 微信端开发

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

          

       

     一、airkiss原理

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

      二、开发步骤

      1. 服务器配置

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

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





        

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

       大概意思就是,当我们点击基本配置的提交按键时,微信服务器会发送一个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文件,配网的页面程序上使用<script>标签引入js文件:

          三、通过config接口注入权限验证配置:

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,由jsapi_ticket\noncestr\timestamp\url组合并sha1加密                           //得到
    jsApiList: ['configWXDeviceWiFi'] // 必填,需要使用的JS接口列表
});

这个跟服务器有效性验证很类似:

        3.1 GET请求获取 jsapi_ticket : https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

        3.2  $signature = sha1(str(jsapi_ticket=xx&noncestr=xx&timestamp=xx&url=xx))得到签名,然后加载网页时,会自动执行wx.config来进行权限沿着高配置

        3.3 利用ready接口可以自动加载配置wifi页面,但是这样会缺少引导或者注意事项:

wx.ready(function(){
    //调用以下函数就可以自动加载配置wifi页面了
    WeixinJSBridge.invoke('configWXDeviceWiFi')
});

        3.4 增加引导页面:使用botton标签的onclick事件来触发。注意,网上的教程有误wx.invoke()要改成WeixinJSBridge.invoke()。发现问题时,可以直接去JS-SDK查找

        


        到这里,配置wifi的微信端开发就算完成了。后面会陆续更新服务端和设备端的开发过程,欢迎关注

展开阅读全文

没有更多推荐了,返回首页