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

下篇预报

生成分享海报

希望能给大家带来帮助

以上就是今天分享的所有内容了，谢谢观看，喜欢可以点赞加关注哦😊

相关推荐

微信小程序分享小程序码的生成（带参数）以及参数的获取

微信小程序生成分享海报（附带二维码生成）

微信小程序生成清晰海报

简单实现小程序自定义导航栏（基于mpvue）

微信小程序中的版本管理

生活娱乐

！惊，跑步竟然能跑出钱来（你的额外收入）

大家注意啦，产品经理打人啦！(一)

完