微信小程序生成二维码的示例代码


Posted in Javascript onMarch 29, 2019

好久没有写文章了,最近公司要做海报分享的活动,需要在小程序中生成扫了之后可以跳转普通网页的二维码,就在github上面找了一下,确实找到了一个兼容兼容性比较不错的,给打加分享一下。

中间尝试了不少,有些在Android上上城会出现问题,亲测这个有效,兼容比较好,已经应用到我们项目中了。

由于在使用便利性方面考虑,我对这个进行了一定的改动,新增了二维码白边功能和支持回调函数直接获取临时文件的功能,希望能够帮助到大家。

github地址

weapp-qrcode 点击查看(欢迎star),其中附有源工程地址

使用

在github上下载工程,主要用到的文件是/utils/weapp-qrcode.js文件

引入文件:

可以将文件直接放在自己工程下面引入使用

import QRCode from '/utils/weapp-qrcode.js'

使用:

new QRCode('myQrcode',{
 text: 'http://www.tongxingschool.com',
 width: 200,
 height: 200,
 padding: 12, // 生成二维码四周自动留边宽度,不传入默认为0
 correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
 callback: (res) => {
  console.log(res.path)
  // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去,看各自需求
 }
})

结构:

<canvas class="canvas-code"canvas-id="myQrcode" style="background:#fff;width: 200px;height: 200px;"/>

注意事项

  • 而宽高,js代码和结构中的宽高需要一致,宽高的样式一定要写成内联样式,不然会有意想不到的效果?
  • padding的颜色自己控制即可,canvas的背景色就是留边的颜色
  • correctLevel是生成二维码可辨识度的级别,级别越高可辨识度越高,从低到高以此是M、L、H、Q

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
使用javascript插入样式
Mar 14 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
使用express获取微信小程序二维码小记
May 21 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 #Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 #Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 #Javascript
详解a标签添加onclick事件的几种方式
Mar 29 #Javascript
node(koa2) web应用模块介绍详解
Mar 29 #Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 #Javascript
浅谈js闭包理解
Mar 28 #Javascript
You might like
2款PHP无限级分类实例代码
2015/11/11 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
php常用正则函数实例小结
2016/12/29 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
python中requests模块的使用方法
2015/04/08 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
python http基本验证方法
2018/12/26 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
python读取xml文件方法解析
2020/08/04 Python
python help函数实例用法
2020/12/06 Python
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
企划专员岗位职责
2013/12/09 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书