WordPress分享到微信

由于webapp不能调用微信的api，所以分享到微信只能是生成二维码，然后扫描再分享，以前一直是用google的二维码生成器，但是有时候可能不带稳定，现在随着二维码的普及，生成平台越来越多，这里选择了一家国内的，还是非常简单的。

为了避免没打开一个页面都要加载二维码图片，我们用html5的data属性把图片存起来，需要的时候在加载图片，这样可以增加页面载入速度。

下面的代码加入到single.php的loop中

<div id="weixin"><a href="javascript:;" data-qr="http://qr.liantu.com/api.php?text=<?php the_permalink();?>">分享到微信<a></div>

JS代码

$('#weixin .weixin-btn').click(function() {
    var weixinQr = '<div id="openWeixin"><img src="' + $(this).data('qr') + '"></div>';
    $('body').append(weixinQr);
});
$(document).on("click", "#openWeixin",
function() {
    $('#openWeixin').remove();
});

参考css

#openWeixin {
    width:300px;
    height:300px;
    position:fixed;
    top:50%;
    left:50%;
    margin-left:-150px;
    margin-top:-150px;
    box-shadow:0 0 0 5px #eee
}
#weixin {
    text-align:center;
    padding:10px
}
#weixin .weixin-btn {
    background:#3B5998;
    color:#fff;
    padding:5px 10px
}

Github地址

当然还有一些用JS来生成二维码的方法，这个以后再介绍。