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

 更新时间: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实现简单计算器效果【推荐】。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-04-04
  • JS根据Unix时间戳显示发布时间是多久前【项目实测】

    JS根据Unix时间戳显示发布时间是多久前【项目实测】

    小编最近在实现这样的需求类似微信朋友圈显示发布时间为距离当前时间多久之前这样的功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2019-07-07
  • js实现单击可修改表格

    js实现单击可修改表格

    这篇文章主要为大家详细介绍了js实现单击可修改表格,类似成绩单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JavaScript实现动态删除列表框值的方法

    JavaScript实现动态删除列表框值的方法

    这篇文章主要介绍了JavaScript实现动态删除列表框值的方法,涉及javascript针对select列表框的遍历与删除操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 你应该了解的JavaScript Array.map()五种用途小结

    你应该了解的JavaScript Array.map()五种用途小结

    大家都知道map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。下面这篇文章主要给大家介绍了关于JavaScript Array.map()的五种用途,需要的朋友可以参考下
    2018-11-11
  • js window.addEventListener 简介

    js window.addEventListener 简介

    window.addEventListener是JavaScript中用于添加事件监听器的方法,允许在发生特定事件时执行函数,本文给大家介绍js window.addEventListener 是什么,感兴趣的朋友一起看看吧
    2024-09-09
  • JS面向对象编程详解

    JS面向对象编程详解

    这篇文章主要为大家详细介绍了JS面向对象编程,帮助大家更详细的对JS面向对象进行学习,感兴趣的朋友可以参考一下
    2016-03-03
  • javascript 利用arguments实现可变长参数

    javascript 利用arguments实现可变长参数

    在C#中,有可变长参数params[],但是在js中,如何实现这种可变参数呢?本片文章主要介绍利用arguments,实现可变长参数。有需要的请参考下
    2016-11-11
  • JS实现图片平面旋转的方法

    JS实现图片平面旋转的方法

    这篇文章主要介绍了JS实现图片平面旋转的方法,涉及JavaScript操作页面元素样式动态变换的相关技巧,需要的朋友可以参考下
    2016-03-03
  • JS 学习笔记 防止发生命名冲突

    JS 学习笔记 防止发生命名冲突

    为了防止发生命名冲突,可以建立自己的代码库。
    2009-07-07

最新评论