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


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截取中文字符串的实现代码
Dec 22 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
Vue全家桶入门基础教程
May 14 Vue.js
JavaScript canvas实现流星特效
May 20 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实现天干地支计算器示例
2014/03/14 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
Python中的数学运算操作符使用进阶
2016/06/20 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
python写日志文件操作类与应用示例
2019/07/01 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
12岁生日感言
2014/01/21 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
数控机床专业自荐信
2014/05/19 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
社区服务活动报告
2015/02/05 职场文书
Python 中random 库的详细使用
2021/06/03 Python
深入理解go缓存库freecache的使用
2022/02/15 Golang
详解flex:1什么意思
2022/07/23 HTML / CSS