微信连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进行一些操作。并通知路由器放行客户端。
时间： 2024-10-19 17:59:20