2021-10-07

现在已经是移动时代了,平常在手机上阅读和浏览网站也是成为主流,那么要是网站上没有便捷的方式让用户快速在其手机等移动设备上在阅读的话还真有点落伍,那么我想目前就在网站上做个“扫码阅读”的功能是最快,最便捷的了。其实很简单,就是将网址生成二维码就行了。



无论用网络上提供的一些API生成,还是PHP生成,或是用JavaScript生成都是可以的,之前氢设计(H2sheji)之前有一篇文章是介绍一些常用的这维码生成Api,我也建议使用这些API,快捷方便,不过也有些站长似乎想要自己弄个,这从代码改动来说,用JavaScript会更省事些。所以这里就用jQuery吧。正好网上有个 jquery.qrcode.js 的扩展,可以拿来用。使用起来也很简单,比如这样:

<div id="qrcode"></div> 
<script src="//libs.baidu.com/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="//apps.bdimg.com/libs/jquery-qrcode/1.0.0/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.h2sheji.com/' //任意内容 
}); 
</script>




jquery.qrcode.js 其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,默认使用canvas方式,效率最高,当然要浏览器支持html5。直接调用如下:

jQuery('#code').qrcode("http://www.h2sheji.com/");



如果浏览器不支持 HTML5,或者你要配置图片的尺寸,则可以采用这种方式:

<script type="text/javascript">
jQuery("#code").qrcode({ 
    render: "canvas", //canvas or table方式 
    width: 150, //宽度 
    height:150, //高度 
    text: 'http://www.h2sheji.com/' //内容 
}); 
</script>



然后用微信、支付宝钱包什么的扫一扫就可以在手机浏览器打开了,很方便,感谢 jquery.qrcode.js 的作者。

打赏

好文章,更需要你的鼓励

本文由 氢设计 创作,除注明转载/出处外,均为本站原创,转载前请务必署名

最后编辑时间为:2021-11-23 10:21:01

本文链接:https://www.h2sheji.com/show-47.html