如何在WordPress站点不同的地方展现不同的微信二维码（lowweixin.js）？

导语：叶子在上一篇文章中提到了lowweixin.js，这个js文件是叶子自己写的，用来生成二维码图片的弹出窗口，在不同的地方点击不同的微信图标，会弹出不同的预设的二维码图片。我们来看看如何实现。

lowweixin.js介绍

我们先看看弹出窗口的效果图片。

当页面加载了lowweixin.js，它会创建一个隐藏的DIV，但点击微信图标后，它将会显示出来，再次点击又会隐藏。
我们再看看整个的lowweixin.js文件内容。

jQuery(document).ready(function() {
//二维码图片地址
var imgurl= jQuery('#low-wx').attr('href');

var main = jQuery('<div></div>'); //创建一个父DIV
main.attr('id', 'leaf_weixin_share'); //给父DIV设置ID
main.addClass('weixin_share'); //添加CSS样式

var leaf_weixin_modal = jQuery('<div></div>'); //创建一个子DIV
leaf_weixin_modal.attr('id', 'leaf_weixin_modal'); //给子DIV设置ID
leaf_weixin_modal.removeClass();
leaf_weixin_modal.addClass('weixin_modal');
leaf_weixin_modal.appendTo(main);

var leaf_modal_header = jQuery('<div></div>'); //创建一个子DIV
leaf_modal_header.attr('id', 'leaf_modal_header'); //给子DIV设置ID
leaf_modal_header.removeClass();
leaf_modal_header.addClass('modal_header');
leaf_modal_header.appendTo(leaf_weixin_modal);

var leaf_modal_header_a = jQuery('<a id="leaf_weixin_close" class="weixin_close" href="#">×</a>'); //创建一个关闭的A标签
leaf_modal_header_a.appendTo(leaf_modal_header);

var leaf_modal_header_h3 = jQuery('<h3 id="leaf_weixin_h3" >关注微信或公众号</h3>'); //创建一个h3
leaf_modal_header_h3.appendTo(leaf_modal_header);

var leaf_modal_body = jQuery('<div></div>'); //创建一个子DIV
leaf_modal_body.attr('id', 'leaf_modal_body'); //给子DIV设置ID
leaf_modal_body.removeClass();
leaf_modal_body.addClass('modal_body');
leaf_modal_body.appendTo(leaf_weixin_modal);
var leaf_modal_body_p = jQuery('<p id="leaf_webchat"><img id="low-wx-img" src="'+imgurl+'" width="220" height="220" alt="二维码加载失败..." ></p>'); //创建一个p
leaf_modal_body_p.appendTo(leaf_modal_body);
var leaf_modal_footer = jQuery('<div></div>'); //创建一个子DIV
leaf_modal_footer.attr('id', 'leaf_modal_footer'); //给子DIV设置ID
leaf_modal_footer.removeClass();
leaf_modal_footer.addClass('modal_footer');
leaf_modal_footer.appendTo(leaf_weixin_modal);
var leaf_modal_footer_div = jQuery('<div id="jiathis_weixin_tip" class="weixin_tip">打开微信，使用 “扫一扫” 即可关注。</div>'); //创建一个div
leaf_modal_footer_div.appendTo(leaf_modal_footer);
main.appendTo('body'); //将父DIV添加到BODY中
main.hide();

jQuery('#leaf_modal_header #leaf_weixin_close').click(function (e) {
e.preventDefault();
jQuery('#leaf_weixin_share').hide() ;

});

jQuery('li.wx-drop , li.wx-soc, .wx-item').on('click',function(e){
e.preventDefault();
if (jQuery(this).is('.wx-item')){
jQuery("#low-wx-img").attr("src",jQuery('#low-wx-author').attr('href'));
}else{
jQuery("#low-wx-img").attr("src",jQuery('#low-wx').attr('href'));
}
//判断弹出窗口是否存在
if(jQuery('#leaf_weixin_share').is(":hidden") ){
//隐藏则显示
jQuery('#leaf_weixin_share').show() ;
}else{
//显示则隐藏
jQuery('#leaf_weixin_share').hide() ;
}
});
});

代码中，它先定义了一个图片地址的变量imgurl，这个是默认的图片地址。然后创建一个div，包含了三部分，头部标题、中部图片、底部说明。创建完成后，它隐藏起来：main.hide();。
当点击DIV窗体的X按钮的时候，它会关闭，也就是隐藏起来：

jQuery('#leaf_modal_header #leaf_weixin_close').click(function (e) {
e.preventDefault();
jQuery('#leaf_weixin_share').hide() ;
});

显示不同的二维码图片

因为叶子在这个主题中，可以设置网站的微信二维码和作者的微信二维码，这两个二维码可以是不同的，比如，一个网站可能会有多个作者，所以，每个作者都可能会有一个二维码。

jQuery('li.wx-drop , li.wx-soc, .wx-item').on('click',function(e){
e.preventDefault();
if (jQuery(this).is('.wx-item')){
jQuery("#low-wx-img").attr("src",jQuery('#low-wx-author').attr('href'));
}else{
jQuery("#low-wx-img").attr("src",jQuery('#low-wx').attr('href'));
}
//判断弹出窗口是否存在
if(jQuery('#leaf_weixin_share').is(":hidden") ){
//隐藏则显示
jQuery('#leaf_weixin_share').show() ;
}else{
//显示则隐藏
jQuery('#leaf_weixin_share').hide() ;
}
});

在点击li.wx-drop、 li.wx-soc、.wx-item这三个CSS的class的时候，就会弹出二维码的窗体。

先使用e.preventDefault()屏蔽默认动作，比如A标签的跳转。

然后判断是不是作者的二维码jQuery(this).is('.wx-item')，如果是，那么将二维码的图片地址设置为作者的图片地址；

jQuery("#low-wx-img").attr("src",jQuery('#low-wx-author').attr('href'));

如果不是，则将图片地址设置为网站的微信二维码图片地址。

jQuery("#low-wx-img").attr("src",jQuery('#low-wx').attr('href'));

然后再判断这个窗口是否隐藏jQuery('#leaf_weixin_share').is(":hidden")，如果隐藏就显示jQuery('#leaf_weixin_share').show()，否则显示就隐藏jQuery('#leaf_weixin_share').hide()。

结束

你看懂这段代码了吗？如果没有看懂，请在下面留言或加入我们的QQ群，一起来学习讨论。