微信连wifi 首先需要到微公众平台添加微信连wifi功能插件
按照提示一步步填写。添加功能插件成功后，左边导航拦将出现门店管理，微信连wifie这两个标签。
选择门店管理标签，添加门店，然后进入微信连wifi菜单，选择添加设备。
选择刚添加的店铺，进行设备添加，然后保存。ssid 为wifi名称 最好是英文的，汉字可能支持不好。
下面是进行代码开发，其实在添加设备时微信已经生成了代码。
拷贝demo代码，稍作修改即可使用。需要注意的是
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <title>微信连Wi-Fi</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <script type="text/javascript"> /* 微信连Wi-Fi协议3.1供运营商portal呼起微信浏览器使用 ----开发认证流程所需参数---- 门店名称 : 四惠大厦 ssid : WX_ikuai shopId : 2645956 appId : wx35c24628b96a9cca secretKey : 58db4ae3340ac2b927b3847bb71da442 ----复用demo代码说明---- 若认证Portal页直接使用此Demo源代码，请注意填写代码中的以下参数（由您的网络环境动态获取）： extend timestamp authUrl mac bssid sign 其中sign签名请在后台完成，例如： var toSign = appId + extend + timestamp + shopId + authUrl + mac + ssid + bssid + secretKey; var sign= md5(toSign); ----参考文档---- http://mp.weixin.qq.com/wiki/10/0ef643c7147fdf689e0a780d8c08ab96.html */ var loadIframe = null; var noResponse = null; var callUpTimestamp = 0; function putNoResponse(ev){ clearTimeout(noResponse); } function errorJump() { var now = new Date().getTime(); if((now - callUpTimestamp) > 4*1000){ return; } alert(‘该浏览器不支持自动跳转微信请手动打开微信\n如果已跳转请忽略此提示‘); } myHandler = function(error) { errorJump(); }; function createIframe(){ var iframe = document.createElement("iframe"); iframe.style.cssText = "display:none;width:0px;height:0px;"; document.body.appendChild(iframe); loadIframe = iframe; } //注册回调函数 function jsonpCallback(result){ if(result && result.success){ alert(‘WeChat will call up : ‘ + result.success + ‘ data:‘ + result.data); var ua=navigator.userAgent; if (ua.indexOf("iPhone") != -1 ||ua.indexOf("iPod")!=-1||ua.indexOf("iPad") != -1) { //iPhone document.location = result.data; }else{ createIframe(); callUpTimestamp = new Date().getTime(); loadIframe.src=result.data; noResponse = setTimeout(function(){ errorJump(); },3000); } }else if(result && !result.success){ alert(result.data); } } function Wechat_GotoRedirect(appId, extend, timestamp, sign, shopId, authUrl, mac, ssid, bssid){ //将回调函数名称带到服务器端 var url = "https://wifi.weixin.qq.com/operator/callWechatBrowser.xhtml?appId=" + appId + "&extend=" + extend + "×tamp=" + timestamp + "&sign=" + sign; //如果sign后面的参数有值，则是新3.1发起的流程 if(authUrl && shopId){ url = "https://wifi.weixin.qq.com/operator/callWechat.xhtml?appId=" + appId + "&extend=" + extend + "×tamp=" + timestamp + "&sign=" + sign + "&shopId=" + shopId + "&authUrl=" + encodeURIComponent(authUrl) + "&mac=" + mac + "&ssid=" + ssid + "&bssid=" + bssid; } //通过dom操作创建script节点实现异步请求 var script = document.createElement(‘script‘); script.setAttribute(‘src‘, url); document.getElementsByTagName(‘head‘)[0].appendChild(script); } </script> <link rel="stylesheet" href="https://wifi.weixin.qq.com/resources/css/style-simple-follow.css"/> </head> <body class="mod-simple-follow"> <div class="mod-simple-follow-page"> <div class="mod-simple-follow-page__banner"> <img class="mod-simple-follow-page__banner-bg" src="https://wifi.weixin.qq.com/resources/images/background.jpg" alt=""/> <div class="mod-simple-follow-page__img-shadow"></div> <div class="mod-simple-follow-page__logo"> <img class="mod-simple-follow-page__logo-img" src="https://wifi.weixin.qq.com/resources/images/t.weixin.logo.png" alt=""/> <p class="mod-simple-follow-page__logo-name"></p> <p class="mod-simple-follow-page__logo-welcome">欢迎您</p> </div> </div> <div class="mod-simple-follow-page__attention"> <p class="mod-simple-follow-page__attention-txt">欢迎使用微信连Wi-Fi</p> <a class="mod-simple-follow-page__attention-btn" onclick="callWechatBrowser()">一键打开微信连Wi-Fi</a> </div> </div> </body> <script type="text/javascript"> function callWechatBrowser(){ Wechat_GotoRedirect(‘wx35c24628b96a9cca‘, ‘extend‘, ‘timestamp‘, ‘sign‘, ‘2645956‘, ‘authUrl‘, ‘mac‘, ‘WX_ikuai‘, ‘bssid‘); } </script> <script type="text/javascript"> document.addEventListener(‘visibilitychange‘, putNoResponse, false); </script> </html>
sign = MD5(appId + extend + timestamp + shop_id + authUrl + mac + ssid + secretkey);
签名的生成需要注意，javaMD5加密完后取小写字符，加密前mac地址的字符全部取小写以“：”隔开。
还有就是传多少个字符在生成签名时MD5多少个字符。
当点击微信中立即连接按钮，微信会返回OPENID和加密的手机号，此时可以通过OPENID进行一些操作。
并通知路由器放行客户端。