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


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实现动态CSS换肤技术的脚本
Jun 29 Javascript
jquery select选中的一个小问题
Oct 11 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
vue的for循环使用方法
Feb 12 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
微信小程序学习笔记之登录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查询方式小结
2016/01/09 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
解决Django中多条件查询的问题
2019/07/18 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
优秀班组事迹材料
2014/12/24 职场文书
python 实现定时任务的四种方式
2021/04/01 Python
jquery插件实现图片悬浮
2021/04/16 jQuery
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android