巅峰霸主 > 设计开发 > 织梦教程 > dedecms使用jquery.qrcode.js插件

dedecms使用jquery.qrcode.js生成并调用二维码

时间:2020-12-17 00:02:06  来源:巅峰霸主网  作者:烈火大地 点击:
摘要:织梦默认的二维码会自带一个网址,而且修改很麻烦,因为网站功能需要,使用jquery.qrcode.js插件生成当前页面的二维码,调用方法如下……

jquery.qrcode.js是一个纯浏览器生成二维码的JS插件,不依赖第三方插件,只对jQuery有依赖,生成的二维码qrcode图片使用canvas来渲染,重点是这个js插件只有14kb,小才是好用的。

jquery.qrcode.js下载

官方网站:http://jeromeetienne.github.io/jquery-qrcode/
GitHub:https://github.com/jeromeetienne/jquery-qrcode

下载之后解压缩,将得到的jquery.qrcode.min.js拷贝到dedecms你的模板文件的js文件夹里面。

dedecms使用jquery.qrcode.js

引入jQuery和qrcode的js文件:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<!--<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>--cdn方式引用-->
<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery.qrcode.min.js"></script>

注意顺序,jQuery要放在qrcode的前面,qrcode对jQuery有依赖,但是对jQuery的版本没有依赖,不管哪个版本的jQuery都支持,所以你的网站原来有jQuery,则只需要调整一下顺序就可以。以上两个JS最好放在模板的<head>标签里面。

在需要显示二维码的地方加入:

<div id="qrcode"></div>
<script>jQuery('#qrcode').qrcode({width:175,height:175,text: "{dede:global.cfg_basehost/}/{dede:field name='arcurl'/}"});</script>

如果删除width和height,则默认输出宽高分别为256px的二维码图片,上面如果网站开启了多域名支持,则需要删除{dede:global.cfg_basehost/}/,否则会多出域名。一定要注意顺序,依次是jQuery、qrcode、div和script,顺序不对可能无法生成二维码,我最初就是把jQuery放在footer里面,结果二维码没有生成。放上我的效果图:

dedecms二维码.gif

dedecms默认使用{dede:qrcode/}标签就能调出系统自带的二维码,但是这个二维码带有一个链接连接到了官方的一个网站,还有就是文字也不好改,使用js插件很方便。

(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部