微信小程序中生成二维码工具：weapp.qrcode.js

MarvinZhang 发布于2019-08-26 11:35 / 3145人阅读

摘要：前言在近期的小程序开发中，有一个离线生成二维码的需求。所以，针对微信小程序的特点，封装了，用于在小程序中快速生成二维码。由于小程序没有动态创建标签的，所以这一步不能省略。调用绘制方法由于微信小程序不支持引入包，可以将目录下，拷贝至项目中。

前言

在近期的小程序开发中，有一个离线生成二维码的需求。当时想到了一些优秀的前端开源库 jquery-qrcode 和 node-qrcode，由于小程序中没有DOM的概念，这些库在小程序中并不适用。

所以，针对微信小程序的特点，封装了 weapp.qrcode.js ，用于在小程序中快速生成二维码。效果如下图：

下面来介绍一下使用方法：

使用 创建canvas标签

先在 wxml 文件中，创建绘制的 canvas，并定义好 width, height, canvasId 。由于小程序没有动态创建标签的api，所以这一步不能省略。

调用绘制方法

由于微信小程序不支持引入NPM包，可以将dist目录下，weapp.qrcode.min.js 拷贝至项目中。

如果你的小程序使用了支持引入NPM包的框架，如 wepy , 也可以直接安装 weapp-qrcode NPM包。

npm install weapp-qrcode --save

引入 js 文件后，调用 drawQrcode() 绘制二维码。

import drawQrcode from "weapp-qrcode"
// 或者，将 dist 目录下，weapp.qrcode.min.js 复制到项目目录中
// import drawQrcode from "../../utils/weapp.qrcode.min.js"

drawQrcode({
  width: 200,
  height: 200,
  canvasId: "myQrcode",
  text: "https://github.com/yingye"
}

API说明

参数	说明	示例
width	必须，二维码宽度，与canvas的width保持一致	200
height	必须，二维码高度，与canvas的height保持一致	200
canvasId	必须，绘制的canvasId	"myQrcode"
text	必须，二维码内容	"https://github.com/yingye"
typeNumber	非必须，二维码的计算模式，默认值-1	8
correctLevel	非必须，二维码纠错级别，默认值为高级，取值：{ L: 1, M: 0, Q: 3, H: 2 }	1
background	非必须，二维码背景颜色，默认值白色	"#ffffff"
foreground	非必须，二维码前景色，默认值黑色	"#000000"

如果想更深入的了解二维码的原理，推荐大家阅读二维码的生成细节和原理。

原始文档

https://github.com/yingye/wea... ，如果觉得还不错，记得给个star奥～

云服务器混合云工具类微信小程序怎么制作微信小程序微信小程序支付微信小程序部署

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107181.html

微信小程序生成二维码工具

摘要：微信小程序生成二维码工具生成二维码数据的主要代码来自，因为它这个里面生成二维码图片的功能在微信小程序里不能使用，我将这个功能改写成可以在微信小程序中使用。 weapp-qrcode 微信小程序生成二维码工具生成二维码数据的主要代码来自davidshimjs/qrcodejs，因为它这个里面生成二维码图片的功能在微信小程序里不能使用，我将这个功能改写成可以在微信小程序中使用。截图 s...

Rocture 2019-08-21 18:35 评论0 收藏0
微信小程序wepy框架学习和使用心得

摘要：四最后一点点感悟本文总结的比较浅显很多地方说的也不是太详细欢迎大家留言一起交流探讨坚持学习不断探索总结路漫漫其修远兮吾将上下而求索参考资料官方文档微信小程序官网开发文档官方开发文档一、微信小程序wepy框架简介: 微信小程序WePY框架是腾讯官方推出来的框架,类似的框架还有美团的mpvue,京东的Taro等; 目前公司开发小程序主要用到的是微信原生方法和官方的wepy框架; wepy...

Baaaan 2019-08-26 13:54 评论0 收藏0
微信小程序开发系列二：微信小程序的视图设计

摘要：安装完毕后启动微信开发者工具，会要求我们指定一个本地项目目录和填写微信小程序的。我最近也刚刚开始微信小程序的开发，想把我自学的一些心得写出来分享给大家。 showImg(https://segmentfault.com/img/remote/1460000016772885); 这是第一篇，从零开始学习微信小程序开发。主要是小程序的注册和开发环境的搭建。首先我们要在下列网址申请一个...

Ryan_Li 2019-08-23 12:29 评论0 收藏0
微信小程序开发系列一：微信小程序的申请和开发环境的搭建

摘要：我最近也刚刚开始微信小程序的开发，想把我自学的一些心得写出来分享给大家。这是第一篇，从零开始学习微信小程序开发。安装完毕后启动微信开发者工具，会要求我们指定一个本地项目目录和填写微信小程序的。我最近也刚刚开始微信小程序的开发，想把我自学的一些心得写出来分享给大家。 showImg(https://segmentfault.com/img/remote/1460000016772885...

jeffrey_up 2019-08-23 12:29 评论0 收藏0