We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在近期的小程序开发中,有一个离线生成二维码的需求。当时想到了一些优秀的前端开源库 jquery-qrcode 和 node-qrcode,由于小程序中没有DOM的概念,这些库在小程序中并不适用。
所以,针对微信小程序的特点,封装了 weapp.qrcode.js ,用于在小程序中快速生成二维码。效果如下图:
下面来介绍一下使用方法:
先在 wxml 文件中,创建绘制的 canvas,并定义好 width, height, canvasId 。由于小程序没有动态创建标签的api,所以这一步不能省略。
canvas
width
height
canvasId
<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>
由于微信小程序不支持引入NPM包,可以将dist目录下,weapp.qrcode.min.js 拷贝至项目中。
如果你的小程序使用了支持引入NPM包的框架,如 wepy , 也可以直接安装 weapp-qrcode NPM包。
npm install weapp-qrcode --save
引入 js 文件后,调用 drawQrcode() 绘制二维码。
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' }
{ L: 1, M: 0, Q: 3, H: 2 }
如果想更深入的了解二维码的原理,推荐大家阅读 二维码的生成细节和原理 。
https://github.com/yingye/weapp-qrcode ,如果觉得还不错,记得给个star奥~
The text was updated successfully, but these errors were encountered:
No branches or pull requests
前言
在近期的小程序开发中,有一个离线生成二维码的需求。当时想到了一些优秀的前端开源库 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包。
引入 js 文件后,调用
drawQrcode()
绘制二维码。API说明
canvas
的width
保持一致canvas
的height
保持一致canvasId
{ L: 1, M: 0, Q: 3, H: 2 }
如果想更深入的了解二维码的原理,推荐大家阅读 二维码的生成细节和原理 。
原始文档
https://github.com/yingye/weapp-qrcode ,如果觉得还不错,记得给个star奥~
The text was updated successfully, but these errors were encountered: