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


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扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 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中的日期及时间
2006/11/23 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
php 强制下载文件实现代码
2013/10/28 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
Python操作MySQL简单实现方法
2015/01/26 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
python定向爬取淘宝商品价格
2018/02/27 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
Django 多环境配置详解
2019/05/14 Python
Puppeteer使用示例详解
2019/06/20 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
python反扒机制的5种解决方法
2021/02/06 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
军训自我鉴定100字
2014/02/13 职场文书
安全生产承诺书范文
2014/05/22 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
学校师德师风整改方案
2014/10/28 职场文书
小学国庆节活动总结
2015/03/23 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL