我的开发顺序是这样的：

        1. 服务端开发

        2. 设备端开发

        3. 微信端开发

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

airtest打开微信小程序_微信配网

     

airtest打开微信小程序_airtest打开微信小程序_02

     

airtest打开微信小程序_airkiss_03


     一、airkiss原理

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

      二、开发步骤

      1. 服务器配置

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

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

airtest打开微信小程序_airkiss_04






airtest打开微信小程序_天猫精灵_05

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

airtest打开微信小程序_微信配网_06

       大概意思就是，当我们点击基本配置的提交按键时，微信服务器会发送一个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文件：

airtest打开微信小程序_微信_07

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

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

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

 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查找

        

airtest打开微信小程序_天猫精灵_08


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