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


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实现控制经纬度显示地图与卫星
May 20 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 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
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP HTML代码串截取代码
2008/12/29 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
javascript 回调函数详解
2014/11/11 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
vuex实现的简单购物车功能示例
2019/02/13 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
鼓励运动员的广播稿
2014/02/08 职场文书
电台实习生求职信
2014/02/25 职场文书
请假条格式范文
2014/04/10 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
庆祝国庆节标语
2014/10/09 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
vue中div禁止点击事件的实现
2022/04/02 Vue.js