新加入“扫码阅读”功能
生活随笔
收集整理的這篇文章主要介紹了
新加入“扫码阅读”功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天看到一個用戶發了個話題,“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> <script src="http://www.nowamagic.net/librarys/application/views/veda/js/jquery.qrcode.min.js" type="text/javascript"></script> <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/' //內容 });轉載至:http://www.nowamagic.net/librarys/veda/detail/2634?
轉載于:https://www.cnblogs.com/zjx2011/p/5010691.html
總結
以上是生活随笔為你收集整理的新加入“扫码阅读”功能的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Cisco ××× 完全配置指南-连载-
- 下一篇: 如何做中台战略分析模型?