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

 更新时间:2019年03月29日 10:01:01   作者:dillon_fly  
这篇文章主要介绍了微信小程序生成二维码的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

好久没有写文章了,最近公司要做海报分享的活动,需要在小程序中生成扫了之后可以跳转普通网页的二维码,就在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动态修改背景颜色的方法

    这篇文章主要介绍了JavaScript动态修改背景颜色的方法,涉及javascript操作鼠标事件及样式的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • js替换字符串的所有示例代码

    js替换字符串的所有示例代码

    本文为大家详细介绍下js如何替换字符串中所有,肯定包含了你所想要的,具体的实现思路及代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • 再谈Javascript中的异步以及如何异步

    再谈Javascript中的异步以及如何异步

    大家都知道js是单线程的,执行起来是顺序的,在顺序的业务逻辑中当然没有问题,如果遇到可以并发执行的业务逻辑,再排队就很低级了!所以这里我们再来简单的谈谈JS中的异步以及如何异步。
    2016-08-08
  • javascript获取所有同类checkbox选项(实例代码)

    javascript获取所有同类checkbox选项(实例代码)

    javascript获取所有同类checkbox选项的简单实例。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • XmlUtils JS操作XML工具类

    XmlUtils JS操作XML工具类

    经常用到对xml的操作,Java里面有dom和dom4j等工具类,但是Javascript就没有,所以自己写了一个,目前算作第一个版本吧。肯定还有很多地方需要改进,如果有需要用的朋友,可以把bug和需要完善改进的地方留言或评论。
    2009-10-10
  • JS实现简单短信验证码界面

    JS实现简单短信验证码界面

    要实现短信验证码界面,首先要有一个文本框,旁边是按钮,点击时开始倒计时。接下来通过本文给大家分享js实现简单短信验证码界面,感兴趣的朋友参考下吧
    2017-08-08
  • 2019 年编写现代 JavaScript 代码的5个小技巧(小结)

    2019 年编写现代 JavaScript 代码的5个小技巧(小结)

    这篇文章主要介绍了2019 年编写现代 JavaScript 代码的5个小技巧,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • js实现的仿Photoshop鼠标滚轮控制输入框取值(修正兼容Chrome)

    js实现的仿Photoshop鼠标滚轮控制输入框取值(修正兼容Chrome)

    一直很想做这个效果,原理是监听鼠标滚轮事件;可将此效果继续发散到其他应用上,如图片缩放,页面缩放等。
    2010-02-02
  • js前端日历控件(悬浮、拖拽、自由变形)

    js前端日历控件(悬浮、拖拽、自由变形)

    这篇文章主要为大家详细介绍了js前端日历控件,可根据日期自定义日历上某日的颜色,另外可以悬浮,拖拽,自由变形
    2017-03-03
  • 基于原生js实现判断元素是否有指定class名

    基于原生js实现判断元素是否有指定class名

    这篇文章主要介绍了基于原生js实现判断元素是否有指定class名,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07

最新评论