ionic生成二维码和普通页面生成二维码js

来源：互联网发布：aop切面编程 android 编辑：程序博客网时间：2024/05/21 19:28

两种情况下生成二维码一致。只是在引入二维码js的时候不太一样

思路：

1.引入qrcode.js（下载地址http://davidshimjs.github.io/qrcodejs/）

2.获取需要生成二维码的DOM节点

3.在获取到的节点上设置二维码显示的大小等信息

4.获取生成二维码所需的数据（也就是把什么数据生成二维码）

5.生成二维码

1.ionic项目中生成二维码：

1.在assets文件夹里面引入qrcode.js。一定要放在assets文件夹中。

2.在ts里面声明QRCode。特别注意，在使用QRCode方法时在ionic中如果使用了懒加载一定要将QRCode的声明放在懒加载注入IonicPage前面。否则报错。

3.在index中引入qrcode.js

declare var QRCode;@IonicPage({})

3.生成二维码：

ionViewDidEnter() {    var qrcode_c = document.getElementById("qrcode_c");//获取生成二维码的节点    if(qrcode_c){        var thisURL = "http://www.cnblogs.com/yisheng163/p/4472687.html";//生成二维码所需数据        var qrcode = new QRCode(qrcode_c, { //设置二维码显示的大小等信息            width : 60,            height : 60        });        qrcode.makeCode(thisURL);//生成二维码    }}

html:

<div id='qrcode_c' style='background-color:pink;width:100px;padding:6px;'></div>

2.普通页面生成二维码js

正常引入qrcode.js

[javascript]

var qrcode_c = document.getElementById("qrcode_c");

if(qrcode_c){

var thisURL = document.URL;

var qrcode = new QRCode(qrcode_c, {

width : 60,

height : 60

});

qrcode.makeCode(thisURL);

}

以上方法生成的二维码据说qrcode是通过canvas生成二维码的，不支持canvas的浏览器没法用

3.jquery插件生成二维码：

参照：http://www.jq22.com/jquery-info294

将jquery.qrcode.min.js和jquery添加到您的网页中

1
2
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

然后创建一个DOM元素去包含生成qr码。

1
<div id="qrcode"></div>

然后你在此容器中的添加qrcode

1
2
3
4
5
<script>
    jQuery(function(){
    jQuery('#qrcode').qrcode("http://www.jq22.com");
})
</script>

就这么简单，您想要的二维码就生成了。

感谢网友布提供的内容

进阶用法

指定二维码的生成方式：

可以在调用函数的同时输入想要的二维码生成方式（table/canvas）。

1
2
3
4
5
6
7
8
9
10
11
//使用table生成
jQuery('#qrcode').qrcode({
    render: "table",
    text: "http://www.jq22.com"
});
 
//使用canvas生成
jQuery('#qrcode').qrcode({
    render: "canvas",
    text: "http://www.jq22.com"
});

指定生成二维码的大小：

可以在调用函数的同时输入想要生成二维码的宽度和高度即可指定生成的二维码的大小。

1
2
3
4
5
6
7
//生成100*100(宽度100，高度100)的二维码
jQuery('#qrcode').qrcode({
    render: "canvas", //也可以替换为table
    width: 100,
    height: 100,
    text: "http://www.jq22.com"
});

指定生成二维码的色彩样式：

可以在调用函数的同时输入想要生成二维码的前景色和背景色即可指定生成的二维码的色彩样式。

1
2
3
4
5
6
7
//生成前景色为红色背景色为白色的二维码
jQuery('#qrcode').qrcode({
    render: "canvas", //也可以替换为table
    foreground: "#C00",
    background: "#FFF",
    text: "http://www.jq22.com"
});

中文ULR生成方法:

1
jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI进行转码

阅读全文

0 0