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


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简单实现图片无缝滚动
Dec 05 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
javascript json 新手入门文档
2009/12/03 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
django中ImageField的使用详解
2020/12/21 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
大学生旷课检讨书
2014/01/22 职场文书
房屋转让协议书范本
2014/04/11 职场文书
大学开学计划书
2014/04/30 职场文书
法语专业求职信
2014/07/20 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
期中考试后的感想
2015/08/07 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
利用Python实现模拟登录知乎
2022/05/25 Python