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


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实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
js实现炫酷光感效果
Sep 05 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
教师申诉制度
2014/01/29 职场文书
工作自我评价怎么写
2014/01/29 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
采购助理岗位职责
2014/02/16 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
通讯稿范文
2015/07/22 职场文书
运动会宣传稿100字
2015/07/23 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
python使用glob检索文件的操作
2021/05/20 Python
分享几个简单MySQL优化小妙招
2022/03/31 MySQL