1.先获取调用微信JS-SDK需要的signature参数，过程如下：
-
1.获取
access_token：点击进入页面 填写appid和secret，获取access_token，有效时间为两小时 -
2.获取
ticket：通过get请求获取ticket，请求地址为 “https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=上一步获取到的access_token&type=jsapi”，ticket有效时间为两小时 -
3.生成
signature：点击进入页面，用上一步获取的ticket生成signature，如下图：
- 注：以上三步操作在正式项目中，应该放在后台执行，然后将参数返回给前端；个人测试则随意。
2.写测试代码
- html代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微信配网</title> <!--引入jquery--> <script src="js/jquery-3.3.1.js"></script> <!--引入微信js--> <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> </head> <body> <h1>在设备进入配网模式后，点击按钮，调起微信配网页面</h1> <input id="wifi" type="button" value="配网模式" style="height: 500px;width: 500px;"/> <h1>配网结果：</h1> <h1 id="message"></h1> </body> </html> <script> //通过config接口注入权限验证配置 wx.config({ beta: true,//开启内测接口调用，注入wx.invoke方法 debug: true,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '填写公众号的appId', // 必填，公众号的唯一标识 timestamp: 1517822166, // 必填，生成签名的时间戳 nonceStr: '填写刚才获取signature时的随机字符串', // 必填，生成签名的随机串 signature: '刚才获取到的signature',// 必填，签名 jsApiList: ['configWXDeviceWiFi'] //必填， JS接口列表，这里只填写了微信配网需要的接口 }); //点击进入微信配网页面 $("#wifi").click(function () { wx.invoke('configWXDeviceWiFi', {}, function (res) { var err_msg = res.err_msg; if (err_msg == 'configWXDeviceWiFi:ok') { $('#message').html("配网成功"); } else { $('#message').html("配网失败"); } }); }); </script>
3.运行测试
-
因为微信JS-SDK必须在微信浏览器中使用，所以测试时需要在手机微信端打开测试页面，或者pc端用微信web开发者工具测试，点击下载开发者工具；
本次测试的配网功能必须用手机才行，所以不能用pc端开发者工具，必须在微信手机端进行测试。 -
先在pc端运行代码，确保在生成签名
signature时填写的urlhttp://10.10.1.58:8080/aaa/aaa.html能正常访问，能正常访问则将此地址发到手机微信上，如下图：
- 然后在手机端打开刚才发送的地址
http://10.10.1.58:8080/aaa/aaa.html，打开后页面弹框显示config:ok则JS-SDK配置成功，如下图：
- 最后一步，先将设备进入Airkiss配网模式，再点击微信页面中的配网按钮，即可调起微信的配网页面，在配网页面填入wifi密码后点击连接，即可配网成功（配网时，手机最好距离设备近一点），过程如下：
微信配网页面如下：
输入wifi密码，点击连接等待设备配网，成功后如下图：
