確實(shí)現(xiàn)在已經(jīng)是移動(dòng)時(shí)代了，在移動(dòng)設(shè)備上閱讀慢慢會(huì)成為主流，網(wǎng)站如果沒有便捷的方式讓用戶在移動(dòng)設(shè)備閱讀的話還真有點(diǎn)落伍，于是想想就做個(gè)“掃碼閱讀”的功能吧。其實(shí)很簡(jiǎn)單，就是將網(wǎng)址生成二維碼就行了。

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

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

生成QR碼的代碼如下：

復(fù)制代碼代碼如下:

<div id="qrcode"></div>
<script src=" <script src=" <script type="text/javascript">
jQuery.noConflict();
jQuery("#qrcode").qrcode({
render: "canvas", //table方式
width: 150, //寬度
height:150, //高度
text: 'http://www.xxx.net/' //任意內(nèi)容
});
</script>

jquery.qrcode.js 其實(shí)是通過使用jQuery實(shí)現(xiàn)圖形渲染，畫圖，支持canvas（HTML5）和table兩種方式，默認(rèn)使用canvas方式，效率最高，當(dāng)然要瀏覽器支持html5。直接調(diào)用如下：

復(fù)制代碼代碼如下:

jQuery('#code').qrcode("

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

復(fù)制代碼代碼如下:

jQuery("#code").qrcode({

   render: "canvas", //canvas or table方式

   width: 150, //寬度

   height:150, //高度

   text: 'http://www.xxx.net/' //內(nèi)容

});

現(xiàn)在博客每篇文章右側(cè)都有生成QR碼，可以掃一掃，在手機(jī)上閱讀了。

您可能感興趣的文章: