微信域名拦截检测工具实现及原理——调用api接口批量查询工具教程

之前客户给了一个微信的域名检测api接口，接口是用于对接系统自动检测域名是否被微信拦截用的
最近买域名比较频繁，总是入坑，一不小心买回来的新域名就是已经被微信拦截的
手头上的检测接口直接拿来用很不方便，这才想着写个本地的网页版批量查询工具，自己用，方便！
一下是实现过程（最后附上完整版代码，如果是小白可以直接拿去用）：

1.前端代码实现

先找个批量检测前端界面，在此以手中接口：矮鹿检测接口的网页版为例
多余部分去掉，留下head部分的样式，body里留下关键的文本输入框、按钮和结果面板就行了，其他的可以不用动，喜欢其他颜色的可以调整个颜色

主要组件代码

<!--主要页面组建 -->
<div class="panel" style="background:#000">
    <div class="panel_inner">
        <div class="promo">
            <!--标题 -->
            <h2 style="color:#fff">微信域名批量检测工具</h2>
        </div>
        <div class="form1">
            <!--输入框，可以自己调节大小 -->
            <textarea class="main-textarea" placeholder="请输入需要检测的链接" type="text" id="text" name="text" value="" size="60" style="height:160px;"></textarea>    
            <!--提交按钮 -->
            <button type="button" id="btn-tcn" class="main-button" onclick="wxcheck_form()">批量检测</button>
        </div>
        <!--输出结果组建 -->
        <div id="result_panel"></div>
    </div>
</div>

实现效果：

image

2.js代码部分实现

先载入他们的两个基础包：

<script src="http://juhecdn.oss-cn-hangzhou.aliyuncs.com/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://yunapposs.oss-cn-hangzhou.aliyuncs.com/static/web/layer3/layer.js" charset="utf-8"></script>

然后重新修改他们的js主方法

js主部分

主方法分为两部分，页面操作和调用返回输出，这里就不一一叙述了

<script>
var notice_msg = '微信域名检测';
        var api_host = 'http://api.zaiailu.com';
        function wxcheck_form(){
            $("#result_panel").hide();
            var url_longs = $("#text").val();
            if(!url_longs) {
                alert('输入格式不正确！');
                return false;
            }
            $.post(api_host+"/"+"wxcheck/web_panel", {url_longs:url_longs},function(result){
                $('#result_panel').html(result);
                $("#result_panel").show();
                wxcheck_handdle();
            });
            return false;
        }
        
        function wxcheck_handdle() {
            var wxcheck_api_url = 'http://api.zaiailu.com/keyisE3AYL43N/wxcheck?url=';//检测接口
            var em = $("*[data='-']:eq(0)");
            if(em.length>0) {
                em.attr('data','loading');
                em.html('<img src="http://www.link114.cn/template/images/loading.gif" />');
                $.get(wxcheck_api_url+em.attr('url-long'),function(result){
                    if(result.indexOf('正常')>-1) {
                        em.html('<span class="opt-result-ok" style="color:green;">域名正常</span>');
                        wxcheck_handdle();
                    } else if(result.indexOf('被封')>-1) {
                        em.html('<span class="opt-result-fail">域名被封</span>');
                        wxcheck_handdle();
                    } else if(result.indexOf('到期')>-1) {
                        em.html('<span class="opt-result-fail">兄弟，接口到期啦!</span>');
                        wxcheck_handdle();
                    } else {
                        em.html('<span class="opt-result-fail">'+result+'</span>');
                        wxcheck_handdle();
                    }
                });
            }
        }

</script>

对接接口

js中加了检测接口注释的那一行就是对接接口的地方，替换对接好接口后，一个本地的网页版批量域名检测工具就完成了，不需要上传服务器，页面放在哪里都能用，这样用起来就方便多了。

实现效果

image

3.代码下载

DEMO我全部写好了，需要的朋友点此下载

下载地址：https://wxcheck-demo.oss-cn-hangzhou.aliyuncs.com/wxCheck_DEMO.rar