wxmp-qrcode
适用于微信小程序的二维码生成器,基于Canvas生成,支持中文的输入。可在原生小程序,mpvue,taro中使用。
安装
npm install wxmp-qrcode
使用
- 创建一个canvas,设置其
id
,与canvas-id
, 并设置canvas的样式,二维码基于其大小生成并居中
- 引入包并使用
QR
api
/** * 根据canvas尺寸,画出合适居中的qrcode * @param {Object} str 二维码的内容 (必须) * @param {Object} canvasId canvasId的值 (必须) * @param {Object} $this 传入组件的this,兼容在组件中生成二维码 (可选,可省略该参数) * @param {Object} callback 回调函数 (可选) */draw: function (str, canvasId, $this, callback) /*** 清除canvas内容* @param {Object} canvasId canvasId (必须)* @param {Object} callback 回调函数 (可选)*/clear: function (canvasId, callback)
注意
- canvas中 id, canvas-id必须保持一致
- id 获取canvas节点,自动计算大小使用, 二维码大小基于canvas生成
- canvas-id 绘制二维码使用
- 如果在组件中使用,需要传入组件的this,
draw(str, canvasId, componentThis)
- 可以保存二维码为临时图片地址
- 具体可参见 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html
- bug: 该方法有时保存的图片会有一个竖条。
{ QRapi this} //获取临时缓存图片路径 { wx}
原生小程序wxmp中使用
- 在项目设置中选择
使用npm模块
- 如果第一次使用npm模块,需要首先在根目录中
npm init
, 之后再安装模块npm i wxmp-qrcode
- 在工具中选择
构建npm
- index.wxml
生成二维码
- index.wxss
- index.js
在mpvue中使用
- 根目录中 install
npm i wxmp-qrcode
- index.vue
<template> <div class="container"> <canvas id="canvasId" canvas-id="canvasId"></canvas> <button @tap="creatQRCode"> 生成二维码 </button> </div></template> <script>import QR from 'wxmp-qrcode' export default { data () { return { canvasId: 'canvasId', QRdata: '你好 wxmp-qrcode' } }, methods: { creatQRCode () { let str = this.QRdata let canvasId = this.canvasId QR.draw(str, canvasId) } }}</script> <style>.container { display: flex; flex-direction: column; align-items: center;} canvas { border: 1rpx solid #eee; width: 400rpx; height: 400rpx;} button { margin-top: 100rpx;} </style>
在taro中使用
- 根目录中 install
npm i wxmp-qrcode
- index.jsx
{ superprops thisstate = canvasId: 'canvasId' QRdata: '你好 wxmp-qrcode' } { let canvasId = thisstatecanvasId let QRdata = thisstateQRdata QR } { return <View className='container' > <canvas id=thisstatecanvasId canvas-id=thisstatecanvasId></canvas> <Button onClick=thiscreateQRcode> 生成二维码 </Button> </View> }
- index.css
感谢
- 欢迎大家提交pr,issue
- 项目改进自 https://github.com/demi520/wxapp-qrcode