之前客戶給了一個(gè)微信的域名檢測api接口，接口是用于對接系統(tǒng)自動(dòng)檢測域名是否被微信攔截用的
最近買域名比較頻繁，總是入坑，一不小心買回來的新域名就是已經(jīng)被微信攔截的
手頭上的檢測接口直接拿來用很不方便，這才想著寫個(gè)本地的網(wǎng)頁版批量查詢工具，自己用，方便！
一下是實(shí)現(xiàn)過程（最后附上完整版代碼，如果是小白可以直接拿去用）：

1.前端代碼實(shí)現(xiàn)

先找個(gè)批量檢測前端界面，在此以手中接口：矮鹿檢測接口的網(wǎng)頁版為例
多余部分去掉，留下head部分的樣式，body里留下關(guān)鍵的文本輸入框、按鈕和結(jié)果面板就行了，其他的可以不用動(dòng)，喜歡其他顏色的可以調(diào)整個(gè)顏色

主要組件代碼

<!--主要頁面組建 -->
<div class="panel" style="background:#000">
    <div class="panel_inner">
        <div class="promo">
            <!--標(biāo)題 -->
            <h2 style="color:#fff">微信域名批量檢測工具</h2>
        </div>
        <div class="form1">
            <!--輸入框，可以自己調(diào)節(jié)大小 -->
            <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>
        <!--輸出結(jié)果組建 -->
        <div id="result_panel"></div>
    </div>
</div>

實(shí)現(xiàn)效果：

image

2.js代碼部分實(shí)現(xiàn)

先載入他們的兩個(gè)基礎(chǔ)包：

<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主部分

主方法分為兩部分，頁面操作和調(diào)用返回輸出，這里就不一一敘述了

<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中加了檢測接口注釋的那一行就是對接接口的地方，替換對接好接口后，一個(gè)本地的網(wǎng)頁版批量域名檢測工具就完成了，不需要上傳服務(wù)器，頁面放在哪里都能用，這樣用起來就方便多了。

實(shí)現(xiàn)效果

image

3.代碼下載

DEMO我全部寫好了，需要的朋友點(diǎn)此下載

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