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


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 相关文章推荐
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
javascript string字符串优化问题
Jul 31 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
vue计算属性及使用详解
Apr 02 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
JS实现音乐导航特效
Jan 06 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 Javascript
微信小程序学习笔记之登录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
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
php中session定期自动清理的方法
2015/11/12 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
Python多进程编程技术实例分析
2014/09/16 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
python实现四人制扑克牌游戏
2020/04/22 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
校本教研工作制度
2014/01/22 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
交通安全标语
2014/06/06 职场文书
场地使用证明模板
2014/10/25 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python