首頁 >web前端 >js教程 >jQuery實作「掃碼閱讀」功能_jquery

jQuery實作「掃碼閱讀」功能_jquery

WBOY
WBOY原創
2016-05-16 16:18:331378瀏覽

今天看到一個用戶發了個話題,「PC端的URL在行動端上打開要一個個敲好麻煩,有什麼好的辦法?」。

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

無論用PHP生成,或是用JavaScript生成都是可以的,從程式碼改變來說,用JavaScript會更省事些。所以這裡就用jQuery吧。剛好網路上有個 jquery.qrcode.js 的擴展,可以拿來用。使用起來也很簡單,例如這樣:

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

產生QR碼的程式碼如下:

複製程式碼 程式碼如下:




jquery.qrcode.js 其實是透過使用jQuery實現圖形渲染,畫圖,支援canvas(HTML5)和table兩種方式,預設使用canvas方式,效率最高,當然要瀏覽器支援html5。直接呼叫如下:

複製程式碼 程式碼如下:

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

如果瀏覽器不支援 HTML5,或者你要配置圖片的尺寸,則可以採用這種方式:

複製程式碼 程式碼如下:

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

現在部落格每篇文章右側都有產生QR碼,可以掃一掃,在手機上閱讀了。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn