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


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 相关文章推荐
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
js href的用法
May 13 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
浅谈React碰到v-if
Nov 04 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
简单了解常用的JavaScript 库
Jul 16 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
javascript 函数式编程
2007/08/16 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
python重试装饰器示例
2014/02/11 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
python环境下安装opencv库的方法
2020/03/05 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
预备党员思想汇报1000字
2014/10/07 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
python爬虫--selenium模块
2021/03/31 Python
关于 Python json中load和loads区别
2021/11/07 Python