# weapp-qrcode
[![npm version](https://badge.fury.io/js/weapp-qrcode.svg)](https://badge.fury.io/js/weapp-qrcode)
[![change-log](https://img.shields.io/badge/changelog-md-blue.svg)](https://github.com/yingye/weapp-qrcode/blob/master/CHANGELOG.md)
weapp.qrcode.js 在 微信小程序 中,快速生成二维码
## Usage
先在 wxml 文件中,创建绘制的 `canvas`,并定义好 `width`, `height`, `canvasId` 。
```html
<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>
```
直接引入 js 文件,使用 `drawQrcode()` 绘制二维码。!!!在 调用 `drawQrcode()` 方法之前,一定要确保可以获取到 `canvas context` 。
在 v0.6.0 版本构建出多个文件,详情移步[Build Files说明](https://github.com/yingye/weapp-qrcode/blob/master/dist/README.md)。
```js
// 将 dist 目录下,weapp.qrcode.esm.js 复制到项目目录中
import drawQrcode from '../../utils/weapp.qrcode.esm.js'
drawQrcode({
width: 200,
height: 200,
canvasId: 'myQrcode',
// ctx: wx.createCanvasContext('myQrcode'),
text: 'https://github.com/yingye',
// v1.0.0+版本支持在二维码上绘制图片
image: {
imageResource: '../../images/icon.png',
dx: 70,
dy: 70,
dWidth: 60,
dHeight: 60
}
})
```
如果项目使用了 wepy 框架,可直接安装 `weapp-qrcode` npm包。
```
npm install weapp-qrcode --save
```
```js
import drawQrcode from 'weapp-qrcode'
drawQrcode({
width: 200,
height: 200,
canvasId: 'myQrcode',
text: 'https://github.com/yingye'
})
```
## DEMO
<img src="./examples/demo.jpg" width=300 >
更多 demo 可以参考 [examples目录](https://github.com/yingye/weapp-qrcode/tree/master/examples),示例包含原生语法及WePY、mpvue、Taro框架。
## API
### drawQrcode([options])
#### options
Type: Object
| 参数 | 说明 | 示例|
| ------ | ------ | ------ |
| width | 必须,二维码宽度,与`canvas`的`width`保持一致 | 200 |
| height | 必须,二维码高度,与`canvas`的`height`保持一致 | 200 |
| canvasId | 非必须,绘制的`canvasId` | `'myQrcode'` |
| ctx | 非必须,绘图上下文,可通过 `wx.createCanvasContext('canvasId')` 获取,v1.0.0+版本支持 | `'wx.createCanvasContext('canvasId')'` |
| text | 必须,二维码内容 | 'https://github.com/yingye' |
| typeNumber | 非必须,二维码的计算模式,默认值-1 | 8 |
| correctLevel | 非必须,二维码纠错级别,默认值为高级,取值:`{ L: 1, M: 0, Q: 3, H: 2 }` | 1 |
| background | 非必须,二维码背景颜色,默认值白色 | `'#ffffff'` |
| foreground | 非必须,二维码前景色,默认值黑色 | `'#000000'` |
| _this | 非必须,若在组件中使用,需要传入,v0.7.0+版本支持 | this |
| callback | 非必须,绘制完成后的回调函数,v0.8.0+版本支持。安卓手机兼容性问题,可通过自行设置计时器来解决,更多可以参考 [issue #18](https://github.com/yingye/weapp-qrcode/issues/18) | `function (e) { console.log('e', e) }` |
| x | 非必须,二维码绘制的 x 轴起始位置,默认值0,v1.0.0+版本支持 | 100 |
| y | 非必须,二维码绘制的 y 轴起始位置,默认值0,v1.0.0+版本支持 | 100 |
| image | 非必须,在 canvas 上绘制图片,**层级高于二维码**,v1.0.0+版本支持,更多可参考[drawImage](https://developers.weixin.qq.com/miniprogram/dev/api/CanvasContext.drawImage.html) | `{ imageResource: '', dx: 0, dy: 0, dWidth: 100, dHeight: 100 }` |
**位置信息可以参见下图:**
<image src="./examples/api.png" width=500 height=500>
## TIPS
weapp.qrcode.js 二维码生成部分借鉴了 jquery-qrcode 源码,可以参考 [jquery-qrcode](https://github.com/jeromeetienne/jquery-qrcode)。
没有合适的资源?快使用搜索试试~ 我知道了~
weapp.qrcode.js 在 微信小程序 中,快速生成二维码.zip
共99个文件
js:40个
json:13个
md:6个
需积分: 1 0 下载量 103 浏览量
2024-01-05
21:11:32
上传
评论
收藏 1.13MB ZIP 举报
温馨提示
微信小程序的优势在于它方便快捷、轻量级、跨平台、丰富的推广方式、丰富的功能接口、数据分析与优化、结合微信支付、支持多场景应用、社交功能以及多端同步等。这些优点使得小程序能够满足用户的多种需求,提供更好的用户体验
资源推荐
资源详情
资源评论
收起资源包目录
weapp.qrcode.js 在 微信小程序 中,快速生成二维码.zip (99个子文件)
open_weixxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxcxxxxxxxxxxxxcxvcvcv
.editorconfig 147B
.eslintrc.js 603B
.travis.yml 443B
.github
ISSUE_TEMPLATE.md 725B
src
qrcode.js 29KB
index.js 3KB
LICENSE 1KB
examples
api.png 145KB
taro-demo
.eslintrc 221B
.editorconfig 197B
yarn.lock 225KB
project.config.json 282B
src
pages
index
index.less 2KB
index.js 2KB
app.js 611B
app.less 0B
index.html 1015B
package.json 2KB
.gitignore 102B
README.md 2KB
config
prod.js 112B
dev.js 113B
index.js 2KB
mpvue-demo
.editorconfig 147B
project.config.json 509B
src
pages
index
main.js 87B
index.vue 2KB
logs
main.js 172B
index.vue 702B
App.vue 628B
main.js 587B
utils
weapp.qrcode.js 29KB
index.js 481B
components
card.vue 187B
.babelrc 312B
package.json 2KB
build
check-versions.js 1KB
dev-server.js 3KB
utils.js 2KB
vue-loader.conf.js 450B
webpack.prod.conf.js 4KB
build.js 1KB
dev-client.js 245B
webpack.base.conf.js 2KB
webpack.dev.conf.js 3KB
package-lock.json 310KB
.postcssrc.js 130B
index.html 198B
.gitignore 145B
static
.gitkeep 0B
README.md 463B
config
prod.env.js 48B
index.js 1KB
dev.env.js 139B
wechat-app
pages
index
index.wxml 1KB
index.js 3KB
index.json 2B
index.wxss 2KB
components
qrcode
index.less 619B
index.wxml 83B
index.js 857B
index.json 23B
test_components
index.wxml 132B
index.js 190B
index.json 83B
index.wxss 2KB
app.json 320B
project.config.json 704B
app.js 48B
utils
weapp.qrcode.js 33KB
weapp.qrcode.min.js 14KB
app.wxss 0B
images
icon.png 741KB
demo.jpg 30KB
wepy-demo
.wepyignore 50B
.editorconfig 156B
.eslintrc.js 723B
wepy.config.js 1KB
src
index.template.html 619B
pages
index.wpy 3KB
app.wpy 562B
.wepycache 2KB
package.json 1KB
.gitignore 145B
.eslintignore 8B
CHANGELOG.md 705B
dist
weapp.qrcode.common.js 16KB
weapp.qrcode.js 33KB
weapp.qrcode.esm.js 16KB
README.md 219B
weapp.qrcode.min.js 15KB
package.json 1KB
build
rollup.dev.config.js 912B
rollup.prod.config.js 1KB
package-lock.json 93KB
.npmignore 161B
.gitignore 139B
.eslintignore 25B
README.md 4KB
共 99 条
- 1
资源评论
极致人生-010
- 粉丝: 2929
- 资源: 2826
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功