給文章生成二維碼

今天看到一個用戶發了個話題，“PC端的URL在移動端上打開要一個個敲好麻煩，有什么好的辦法？”。

確實現在已經是移動時代了，在移動設備上閱讀慢慢會成為主流，網站如果沒有便捷的方式讓用戶在移動設備閱讀的話還真有點落伍，於是想想就做個“掃碼閱讀”的功能吧。其實很簡單，就是將網址生成二維碼就行了。

無論用PHP生成，還是用JavaScript生成都是可以的，從代碼改動來說，用JavaScript會更省事些。所以這里就用jQuery吧。正好網上有個 jquery.qrcode.js 的擴展，可以拿來用。使用起來也很簡單，比如這樣：

 

然后用微信、支付寶錢包什么的掃一掃就可以在手機瀏覽器打開了，很方便，感謝 jquery.qrcode.js 的作者。

生成QR碼的代碼如下：

<div id="qrcode"></div> 
<script src="http://www.nowamagic.net/librarys/application/views/veda/js/jquery-1.6.1.min.js" type="text/javascript">
<script src="http://www.nowamagic.net/librarys/application/views/veda/js/jquery.qrcode.min.js" type="text/javascript">
<script type="text/javascript">
jQuery.noConflict();
jQuery("#qrcode").qrcode({ 
    render: "canvas", //table方式 
    width: 150, //寬度 
    height:150, //高度 
    text: 'http://www.nowamagic.net/' //任意內容 
}); 
</script>

jquery.qrcode.js 其實是通過使用jQuery實現圖形渲染，畫圖，支持canvas（HTML5）和table兩種方式，默認使用canvas方式，效率最高，當然要瀏覽器支持html5。直接調用如下：

jQuery('#code').qrcode("http://www.nowamagic.net/");

如果瀏覽器不支持 HTML5，或者你要配置圖片的尺寸，則可以采用這種方式：

jQuery("#code").qrcode({ 
    render: "canvas", //canvas or table方式 
    width: 150, //寬度 
    height:150, //高度 
    text: 'http://www.nowamagic.net/' //內容 
});