微信连wifi

时间：2016-08-31 22:10:33 收藏：0 阅读：1198

微信连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 
                                + "&timestamp=" + timestamp 
                                + "&sign=" + sign;    
            
            //如果sign后面的参数有值，则是新3.1发起的流程
            if(authUrl && shopId){
                url = "https://wifi.weixin.qq.com/operator/callWechat.xhtml?appId=" + appId 
                                + "&extend=" + extend 
                                + "&timestamp=" + 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>

View Code

sign = MD5(appId + extend + timestamp + shop_id + authUrl + mac + ssid + secretkey);
签名的生成需要注意，javaMD5加密完后取小写字符，加密前mac地址的字符全部取小写以“：”隔开。
还有就是传多少个字符在生成签名时MD5多少个字符。

当点击微信中立即连接按钮，微信会返回OPENID和加密的手机号，此时可以通过OPENID进行一些操作。
并通知路由器放行客户端。