评论

适用于小程序的二维码生成器(支持中文,多框架使用)

小程序端生成自定义二维码

最近在开发中,需要生成自定义的二维码,于是做了一个包出来,分享给大家一起使用。适用于微信小程序的二维码生成器,基于Canvas生成,支持中文的输入。可在原生小程序,mpvue,taro中使用。(文末有一个使用示例)

github地址(wxmp-qrcode)[https://github.com/Z-HNAN/wxmp-qrcode]

安装

npm install wxmp-qrcode

使用

  1. 创建一个canvas,设置其id,与canvas-id, 并设置canvas的样式,二维码基于其大小生成并居中
<canvas id="cav-qrcode" canvas-id="cav-qrcode"></canvas>
  1. 引入包并使用
import QR from 'wxmp-qrcode'
QR.draw(str, canvasId, () => {
	console.log('draw success')
} )

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) 

注意

  1. canvas中 id, canvas-id必须保持一致
  • id 获取canvas节点,自动计算大小使用, 二维码大小基于canvas自动生成
  • canvas-id 绘制二维码使用
  1. 如果在组件中使用,需要传入组件的this,draw(str, canvasId, componentThis)
  1. 可以保存二维码为临时图片地址
createQrCode: function (content, canvasId) {
  QR.draw(content, canvasId)
  this.canvasToTempImage(canvasId)
},

//获取临时缓存图片路径
canvasToTempImage: function (canvasId) {
  wx.canvasToTempFilePath({
    canvasId, 
    success: function (res) {
      let tempFilePath = res.tempFilePath; // 临时图片地址,可在放入图片src中使用
    }
  })
}

原生小程序wxmp中使用

  1. 在项目设置中选择 使用npm模块
  2. 如果第一次使用npm模块,需要首先在根目录中npm init, 之后再安装模块 npm i wxmp-qrcode
  3. 在工具中选择 构建npm
  4. index.wxml
<view class="container">
  <canvas id="{{canvasId}}" canvas-id="{{canvasId}}"></canvas>
  <button bindtap="creatQRCode"> 生成二维码 </button>
</view>
  1. index.wxss
canvas {
  border: 1rpx solid #eee;
  width: 400rpx;
  height: 400rpx;
}
button {
  margin-top: 100rpx;
}
  1. index.js
import QR from './qrcode'

Page({
  data: {
    canvasId: 'canvasId',
    QRdata: '你好 wxmp-qrcode'
  },
  creatQRCode () {
    let str = this.data.QRdata
    let canvasId = this.data.canvasId
    QR.draw(str, canvasId)
  }
})
最后一次编辑于  09-01  
点赞 1
收藏
评论

3 个评论

  • 灬(@.@)灬
    灬(@.@)灬
    10-22

    报错这个pages/logs/qrcode" is not defined,你知道为什么吗?

    10-22
    赞同
    回复
  • 叮咚的雨
    叮咚的雨
    08-30

    安卓部分手机用户无法显示二维码

    08-30
    赞同
    回复 1
    • Z_浩南
      Z_浩南
      09-01
      有报什么错误出来吗?
      09-01
      回复
  • Z_浩南
    Z_浩南
    08-03

    如需使用,请安装2.0.2版本,即wxmp-qrcode@2.0.2,已上传npm,正常install即可,(之前版本由于疏忽,有很大问题 , 十分抱歉(●—●)

    08-03
    赞同
    回复