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


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实现的常用的左侧导航效果
Oct 17 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 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动态生成缩略图并输出显示的方法
2015/04/20 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
Node.js Buffer用法解读
2018/05/18 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
python自动化测试之setUp与tearDown实例
2014/09/28 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
在购买印度民族服饰:Soch
2020/09/15 全球购物
好的自荐信的要求
2013/10/30 职场文书
军训的自我鉴定
2013/12/10 职场文书
小学生考试获奖感言
2014/01/30 职场文书
高中运动会入场词
2014/02/14 职场文书
商超业务员岗位职责
2014/03/12 职场文书
学校花圃的标语
2014/06/18 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
向女朋友道歉的话
2015/01/20 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL