官網
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1444894086
https://blog.csdn.net/u011650048/article/details/50469768
https://service.tp-link.com.cn/detail_article_3440.html
1 開一個微信門店小程序
2.創建一個門店
添加微信連Wi-Fi設備
完成后提交，獲得門店Wi-Fi設備改造信息，包括：appId，shop_id，ssid，secretkey。
開發移動端Portal頁面
微信連Wi-Fi流程
模塊時序圖
若無法看清圖中文字，可先通過“圖片另存為”將圖片保存到本地，再放大查看。
1. 用戶手動選擇SSID，手機瀏覽器彈出Portal頁面
路由器強制攔截所有訪問，強制轉向認證頁面（存放在路由器里）。
2. Portal頁面初始化時，向AC/AP請求移動端和AC/AP的MAC地址
這個頁面讀取手機的mac和WIfi路由器的mac還有名字，這個參數是為了將來微信彈出網頁用的。
在這個頁面搞一個超鏈接，http://www.dongvdong.top/weixin/weixin_md5/微信連Wi-Fi.html
點擊后訪問一個自己的服務器，里面存放一個能使預覽器調用微信APP的網頁（游覽器原本是沒有權限調用的）
移動設備在portal頁中引用下述微信JSAPI，讓原有Wi-Fi portal頁具備呼起微信的能力：
網頁打開（官方教程有基本樣例）
md5.js 因為驗證用到，用到網上搜索下載，放在和網頁同級目錄
文件夾是網頁的一些基本元素（當然可以不用這些元素，直接變成網頁鏈接，參看說明一）
調試版本代碼
（非調試版本看后面）
<!DOCTYPE html>
<!-- saved from url=(0049)https://wifi.weixin.qq.com/operator/demoNew.xhtml -->
<html><head lang="zh-CN"><meta http-equiv="Content-Type" content="text/html; 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呼起微信瀏覽器使用
*/
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{
if('false'=='true'){
alert('[強制]該瀏覽器不支持自動跳轉微信請手動打開微信\n如果已跳轉請忽略此提示');
return;
}
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="./微信連Wi-Fi_files/style-simple-follow.css">
<script src="./微信連Wi-Fi_files/callWechat.xhtml"></script></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="./微信連Wi-Fi_files/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="./微信連Wi-Fi_files/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>
<script type="text/javascript" src="md5.js"></script>
<script type="text/javascript">
function callWechatBrowser(){
var appId = "wx4ccfdb6e5d7775fa";
var secretkey = "581668b51dad78d2a7f80cc3ad27448d";
var extend = "demo"; //開發者自定義參數集合
var timestamp = new Date().getTime(); //時間戳(毫秒)
var shop_id = "17483750"; //AP設備所在門店的ID
var authUrl = "http://www.dongvdong.top/weixin/weixin_php/auth.php?httpCode=200?gwId=11"; //服務器回調地址 gwId當前連接的路由的設備編號
var mac = "14:5f:94:d1:57:20"; //用戶手機mac地址 安卓設備必需
var ssid = "SSID_ESP"; //AP設備信號名稱，非必須
var bssid = "00:a0:b1:4c:a1:c5"; //AP設備mac地址，非必須
//alert("1");
var sign = md5(appId + extend + timestamp + shop_id + authUrl + mac + ssid + bssid + secretkey);
//alert("2");
Wechat_GotoRedirect(appId, extend, timestamp, sign, shop_id, authUrl, mac, ssid, bssid,'ff:ff:ff:ff:ff:ff');
//alert("3");
}
</script>
<script type="text/javascript">
document.addEventListener('visibilitychange', putNoResponse, false);
</script>
<iframe src="./微信連Wi-Fi_files/saved_resource.html" style="display: none; width: 0px; height: 0px;"></iframe></body></html>
這個調用的基本歷程是這樣的
移動設備在portal頁中引用下述微信JSAPI，讓原有Wi-Fi portal頁具備呼起微信的能力：
<script type="text/javascript" src="https://wifi.weixin.qq.com/resources/js/wechatticket/wechatutil.js" ></script>
只不過我上面寫的網頁直接把這個js代碼摳出來，直接寫在html里了。
調用JSAPI觸發呼起微信客戶端：
<script type="text/javascript">
var appId = "wx1bxxxxx33e";
var secretkey = "9cf2exxxxxxx0c237a";
var extend = "shandian"; //開發者自定義參數集合
var timestamp = new Date().getTime(); //時間戳(毫秒)
var shop_id = "819xxx52"; //AP設備所在門店的ID
var authUrl = "http://xxx/callback/auth?httpCode=200?gwId=xxx"; //服務器回調地址 gwId當前連接的路由的設備編號
var mac = "3c:91:57:c2:cc:af"; //用戶手機mac地址 安卓設備必需
var ssid = "A01-S001-R044"; //AP設備信號名稱，非必須
var bssid = "00:a0:b1:4c:a1:c5"; //AP設備mac地址，非必須
function callWechatBrowser(){
var sign = MD5(appId + extend + timestamp + shop_id + authUrl + mac + ssid + bssid + secretkey);
Wechat_GotoRedirect(appId, extend, timestamp, sign, shop_id, authUrl, mac, ssid, bssid); }
</script>
參數說明
實驗證明，如果你不需要這個mac地址做記錄名單，只是想通過這個使得網頁拉起微信，手機mac地址沒軟用。 隨便給個就行。
3 我們的服務器認證設備
點擊這個認證頁面的超鏈接，http://www.dongvdong.top/weixin/weixin_md5/微信連Wi-Fi.html
彈出網頁
點擊按鈕
我們點擊按鍵，實際上在執行3.3和3.4步
之后自動打開微信app,進入鏈接WIFI狀態
緊接着自動
這個時候會失敗，為什么？
因為微信這個時候去求去我們自己的服務器，是否允許其上網，我們的服務器必須給回應
給200認為通過
給302跳轉到另外的認證頁面
其余或者第二次302就認為失敗。
微信給我們服務器發送
http://xxx/callback/auth?httpCode=200?gwId=xxx&gwId=&extend=xxx&openId=xxx&tid=xxx
參數說明
我們要自己寫個后端，經過判斷，給予回復
放在我們的服務器上，網址也就是在我們第一次認證頁面里面填寫的url
"http://www.dongvdong.top/weixin/weixin_php/auth.php?httpCode=200?gwId=11";
function callWechatBrowser(){
var appId = "wx4ccfdb6e5d7775fa";
var secretkey = "581668b51dad78d2a7f80cc3ad27448d";
var extend = "demo"; //開發者自定義參數集合
var timestamp = new Date().getTime(); //時間戳(毫秒)
var shop_id = "17483750"; //AP設備所在門店的ID
var authUrl = "http://www.dongvdong.top/weixin/weixin_php/auth.php?httpCode=200?gwId=11"; //服務器回調地址 gwId當前連接的路由的設備編號
var mac = "14:5f:94:d1:57:20"; //用戶手機mac地址 安卓設備必需
var ssid = "SSID_ESP"; //AP設備信號名稱，非必須
var bssid = "00:a0:b1:4c:a1:c5"; //AP設備mac地址，非必須
php獲取微信返回的openId,tid,extend回調接口
<?php
function auth(){
$gwId = $_GET["gwId"];
$openId = $_GET["openId"];
$extend= $_GET["extend"];
$tid= $_GET["tid"]; //獲取openId添加到數據庫獲取該用戶的token
print_r(tid); // 相當於回復 200
}
auth();
?>
在這里我為了測試，直接給與回復 參數tid ，簡單來說直接回饋 200.
微信認為我們同意，給預防性。
然后微信自動下一步
這時候左上角 完成，點擊就沒有了，啥都沒有了。人為手機正常上網了。
但是我們需要用戶關注公眾號啊！！！
所以需要添加結束引導頁面。
編輯
6. 跳轉到商家主頁可自己設置
緊接着設置
https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NzA2Mjc4Ng==&scene=126&bizpsid=0#wechat_redirect
這個公眾號網址怎么來的
打開公眾號->點右上角的小人圖標->查看歷史消息->點右上角的三個點->復制鏈接->在除微信外的其他地方復制。得到類似如下url：https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=abcdefg==&scene=124#wechat_redirect
設置之后。
我們微信在完成之后
自動跳轉鏈接
正常情況下，這個 關注按鈕點擊，結束。
然而，微信為了防止被人惡意利用（是的，強制你關注別人家的公眾號），取消了這個按鍵。再打開網頁不到2S，按鍵自動消失
這個暫時無解。
然而，我們可以通過點擊頭像，進入有關注的頁面
出現頁面
然而問題來了，用戶是不知道這個細節的。
暫時無解。
但是我們起碼完成，普通網頁調出微信APP,並且換到公眾號認證頁面。
比起搞個二維碼在認證頁面，更方便。
7未來探討
tplink提出一種策略。簡單來說沒有關注就給二維碼。
微信公眾號強制關注設置方法
https://service.tp-link.com.cn/detail_article_3440.html
https://blog.csdn.net/qq_35430000/article/details/83379143
吐槽：最近微信更新了7.0的版本，上面的這種方式 引導 關注公眾號失效了，關注按鈕會一閃而過然后消失，暫時沒有什么好的解決方案，但是 引導 用戶 關注公眾號的目的達到了，如果用戶感興趣 可能會點擊標題或者文章然后關注公眾號。
-----------------------------------------------------------------------------------------------------------------------------
8 如何跳到有關注按鈕的界面
前面我們獲取了一個url，凡是從完成頁面跳轉，按鈕都消失。
但是如果把這個鏈接復制到對話框，發給別人，在對話框打開，能直接進去有按鈕的關注頁面
，也就是說，微信在完成頁面后附加了參數。
H5跳轉實現微信一鍵關注
https://blog.csdn.net/qq_23370345/article/details/84959146
實現方式：
首先登陸自己的微信公眾平台，然后打開開發者工具，搜索window.wx其中的uin為自己平台的id。
經過base64加密，然后在如下鏈接中替換_biz碼即可。
https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=替換成剛才經過加密的id即可&scene=110#wechat_redirect
加密網址
https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NzA2Mjc4Ng0K&scene=110#wechat_redirect
把網址發給朋友，點擊打開，果然是有認證按鈕。
屁顛屁顛替換結束頁面跳轉的URL
然並軟，沒用！依然消失。
微信從上次事件大清理，肯定在結束頁面跳轉過來的時候，附加了一些參數判斷。
附加參數
第一次測試截取地址
http://mp.weixin.qq.com/mp/profile_ext?appId=wx4ccfdb6e5d7775fa&extend=demo×tamp=1555092757&openId=ognVI6JsmBGd7lxYTZY4GH29LcNg&tid=01000715fd93af5a83f017d2e6cad3a694e8bac06eaf89be465b59&shopId=17483750&bssid=&configIndex=0&jumpsrc=jumpfromfinishpage&isContact=0&action=home&__biz=Mzg5NzA2Mjc4Ng0K&scene=110#wechat_redirect
第二次測試截取地址
http://mp.weixin.qq.com/mp/profile_ext?appId=wx4ccfdb6e5d7775fa&extend=demo×tamp=1555092838&openId=ognVI6JsmBGd7lxYTZY4GH29LcNg&tid=01000697bb555263873fb13d2255071e7f45874bbd12b8aab1d75a&shopId=17483750&bssid=&configIndex=0&jumpsrc=jumpfromfinishpage&isContact=0&action=home&__biz=Mzg5NzA2Mjc4Ng0K&scene=110#wechat_redirect
雖說沒有什么軟用，但是我發現，從開發者模式搞來的網址，可以輸出很多信息。 復制鏈接里面把這些信息都給出了。
一般的那種跳轉連接是不會給的。
有了這些參數，可以做的事情
https://zhuanlan.zhihu.com/p/39298139
、說明：
下面的代碼是個備用，我們是把網頁資源放在我們自己服務器
下面代碼全部是從雲端獲取的，減輕我們服務器壓力，只參考這個資源網址，其他認證有問題。
<!DOCTYPE html>
<!-- saved from url=(0049)https://wifi.weixin.qq.com/operator/demoNew.xhtml -->
<html><head lang="zh-CN"><meta http-equiv="Content-Type" content="text/html; 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呼起微信瀏覽器使用
*/
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{
if('false'=='true'){
alert('[強制]該瀏覽器不支持自動跳轉微信請手動打開微信\n如果已跳轉請忽略此提示');
return;
}
createIframe();
callUpTimestamp = new Date().getTime();
loadIframe.src=result.data;
noResponse = setTimeout(function(){
errorJump();
},3000);
}
}else if(result && !result.success){
//alert(result.data);
alert("請重新嘗試！");
}
}
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>
<script type="text/javascript" src="md5.js"></script>
<script type="text/javascript">
function callWechatBrowser(){
var appId = "wx4ccfdb6e5d7775fa";
var secretkey = "581668b51dad78d2a7f80cc3ad27448d";
var extend = "demo"; //開發者自定義參數集合
var timestamp = new Date().getTime(); //時間戳(毫秒)
var shop_id = "17483750"; //AP設備所在門店的ID
var authUrl = "http://www.dongvdong.top/weixin/weixin_php/auth.php?httpCode=200?gwId=11"; //服務器回調地址 gwId當前連接的路由的設備編號
var mac = "14:5f:94:d1:57:20"; //用戶手機mac地址 安卓設備必需
var ssid = "SSID_ESP"; //AP設備信號名稱，非必須
var bssid = "00:a0:b1:4c:a1:c5"; //AP設備mac地址，非必須
//alert("1");
var sign = md5(appId + extend + timestamp + shop_id + authUrl + mac + ssid + bssid + secretkey);
//alert("2");
Wechat_GotoRedirect(appId, extend, timestamp, sign, shop_id, authUrl, mac, ssid, bssid,'ff:ff:ff:ff:ff:ff');
//alert("3");
}
</script>
</body></html>