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


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实现的类似Google的Div拖动效果代码
Aug 09 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 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自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
php中文验证码实现示例分享
2014/01/12 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP new static 和 new self详解
2017/02/19 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
vue组件name的作用小结
2018/05/23 Javascript
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
详解Python中的type和object
2018/08/15 Python
学习python的前途 python挣钱
2019/02/27 Python
深入学习python多线程与GIL
2019/08/26 Python
python同时遍历两个list用法说明
2020/05/02 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
电子信息专业学生自荐信
2013/11/09 职场文书
法学毕业生自荐信
2013/11/13 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
电力培训学习心得体会
2016/01/11 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python