之前客戶給了一個微信的域名檢測api接口，接口是用于對接系統(tǒng)自動檢測域名是否被微信攔截用的
最近買域名比較頻繁酪术，總是入坑翠储，一不小心買回來的新域名就是已經(jīng)被微信攔截的
手頭上的檢測接口直接拿來用很不方便，這才想著寫個本地的網(wǎng)頁版批量查詢工具庐舟，自己用住拭，方便历帚！
一下是實現(xiàn)過程（最后附上完整版代碼挽牢，如果是小白可以直接拿去用）：
1.前端代碼實現(xiàn)
先找個批量檢測前端界面摊求，在此以手中接口：矮鹿檢測接口的網(wǎng)頁版為例
多余部分去掉，留下head部分的樣式睹栖，body里留下關(guān)鍵的文本輸入框茧痕、按鈕和結(jié)果面板就行了踪旷，其他的可以不用動令野，喜歡其他顏色的可以調(diào)整個顏色
主要組件代碼
<!--主要頁面組建 -->
<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>
實現(xiàn)效果：
image
2.js代碼部分實現(xiàn)
先載入他們的兩個基礎(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中加了檢測接口注釋的那一行就是對接接口的地方报强，替換對接好接口后，一個本地的網(wǎng)頁版批量域名檢測工具就完成了力惯，不需要上傳服務(wù)器，頁面放在哪里都能用父晶，這樣用起來就方便多了甲喝。
實現(xiàn)效果
image
3.代碼下載
DEMO我全部寫好了，需要的朋友點(diǎn)此下載
下載地址：https://wxcheck-demo.oss-cn-hangzhou.aliyuncs.com/wxCheck_DEMO.rar
