ionic生成二维码和普通页面生成二维码js
2017-07-28 10:29
239 查看
两种情况下生成二维码一致。只是在引入二维码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
3.生成二维码:
html:
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添加到您的网页中
然后创建一个DOM元素去包含生成qr码。
然后你在此容器中的添加qrcode
就这么简单,您想要的二维码就生成了。
感谢网友 布 提供的内容
指定二维码的生成方式:
可以在调用函数的同时输入想要的二维码生成方式(table/canvas)。
指定生成二维码的大小:
可以在调用函数的同时输入想要生成二维码的宽度和高度即可指定生成的二维码的大小。
指定生成二维码的色彩样式:
可以在调用函数的同时输入想要生成二维码的前景色和背景色即可指定生成的二维码的色彩样式。
中文ULR生成方法:
思路:
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添加到您的网页中
感谢网友 布 提供的内容
进阶用法
指定二维码的生成方式:可以在调用函数的同时输入想要的二维码生成方式(table/canvas)。
可以在调用函数的同时输入想要生成二维码的宽度和高度即可指定生成的二维码的大小。
可以在调用函数的同时输入想要生成二维码的前景色和背景色即可指定生成的二维码的色彩样式。
相关文章推荐
- js生成二维码,web页面,移动h5页添加微信qq分享功能
- js将页面url路径生成二维码手机扫一扫访问
- js页面生成二维码
- 最近发现了个页面生成二维码的js工具
- Qrcode生成二维码(普通篇)之jquery.qrcode.min.js
- Qrcode生成二维码(普通篇)之jquery.qrcode.min.js
- Qrcode生成二维码(普通篇)之jquery.qrcode.min.js
- Qrcode生成二维码普通篇之jquery.qrcode.min.js
- scrapy结合webkit抓取js生成的页面
- JS/JQ生成二维码插件
- jQuery.qrcode.js客户端生成二维码,支持中文并且可以生成LOGO
- 微信6.66版本浏览器网页唤起微信app跳转到指定任意页面二维码识别方法ticket生成
- 加载google Z-Xing库实现二维码解析与生成,并将解析结果在另一页面显示
- JS生成二维码,支持中文字符
- QRCode.js:使用 JavaScript 生成二维码
- jFinal生成二维码直接输出到页面不以图片的形式保存
- Sticker.js生成图片或者页面元素“速干贴”效果
- 二维码js生成库
- js自动生成的元素与页面原有元素发生堆叠
- 抓取Js动态生成数据且以滚动页面方式分页的网页