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


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 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 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
19个超实用的PHP代码片段
2014/03/14 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
extjs render 用法介绍
2013/09/11 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
Python中__call__用法实例
2014/08/29 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
python实现简单爬虫功能的示例
2016/10/24 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Python set常用操作函数集锦
2017/11/15 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python通过链接抓取网站详解
2019/11/20 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
马丁路德金演讲稿
2014/05/19 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
mysql部分操作
2021/04/05 MySQL
Python基础学习之奇异的GUI对话框
2021/05/27 Python
Python数据分析之绘图和可视化详解
2021/06/02 Python
MongoDB 常用的crud操作语句
2021/06/20 MongoDB