使用weapp.qrcode.js 在微信小程序中，快速生成二维码

2023-11-13 阅读：737 分类：后端标签： wepy

本文使用weapp.qrcode.js 在微信小程序中，快速生成二维码，供大家参考：

插件地址（码云直通车）：https://gitee.com/YuJian11/wxQRCode

使用说明：

先在 wxml 文件中，创建绘制的 canvas，并定义好 width, height, canvasId 。

<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>

直接引入 js 文件，使用 drawQrcode() 绘制二维码。!!!在调用 drawQrcode() 方法之前，一定要确保可以获取到 canvas context 。

// 将 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
import drawQrcode from 'weapp-qrcode'

调用方法

import drawQrcode from '@/utils/weapp.qrcode.min.js'
drawQrcode({
 width: 200,
 height: 200,
 canvasId: 'myQrcode',
 text: 'https://github.com/yingye'

三、其他参数

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 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 { imageResource: '', dx: 0, dy: 0, dWidth: 100, dHeight: 100 }

四：wepy完整案例 qcode.wepy

<style lang="less"></style>
<config>
{
	navigationBarTitleText: '在线生成二维码',
	enablePullDownRefresh: false,
	backgroundTextStyle: 'dark',
}
</config>
<template>
<view class="pagebody">
 <canvas style="width: 200px; height: 200px; position: fixed; left: -2400px; top: -2400px;" canvas-id="myQrcode"></canvas>
   <view class="qcode" v-if="qcode">
    <image :src="qcode" class="qcodeImg"/>
   </view>
</view>
</template>
<script>
 import wepy from '@wepy/core'
 import drawQrcode from '@/utils/weapp.qrcode.min.js'
 const app = getApp()
	wepy.page({
 		data: {
    qcode: '',
    text: '二维码内容',
  	},
    async onLoad(options) {
     // 创建二维码
      this.createqcode();
      
  	},
   async onShow(){
    
   },
  	methods: {
    
    // 生成二维码
    async createqcode(){
     var that = this
     if(that.ctmMobile){
      // 直接设置 options.image 的值，在手机上logo会绘制失败
       new Promise((resolve, reject) => {
          // 绘制网络地址的logo时需要先使用 wx.getImageInfo 获取到图片信息
          // 注意网络图片需先配置download域名 wx.getImageInfo 才能生效。
          wx.getImageInfo({
            src: 'triage/qcodelogo.jpg',
            success: (res) => {
              resolve(res.path);
            },
            fail: (e) => {
              // 获取logo失败也不应该影响正确生成二维码图片
              // 这里可以给出失败提示
              resolve();
            }
          })
        }).then((path) => {
          let options = {
            width: 180,
            height: 180,
            x: 10,
            y: 10,
            canvasId: 'myQrcode',
            text: that.text,
            callback: (e) => {
              // 使用 setTimeout, 避免部分安卓机转出来的二维码图片不完整
              setTimeout(() => {
                wx.canvasToTempFilePath({
                  canvasId: 'myQrcode',
                  x: 0,
                  y: 0,
                  width: 200,
                  height: 200,
                  success: (e) => {
                   console.log(e.tempFilePath)
                   that.qcode = e.tempFilePath
                  },
                })
              }, 0);
            }
          }
          if(!!path){
            options.image = {
              imageResource: path,
              dx: 70,
              dy: 70,
              dWidth: 60,
              dHeight: 60
            }
          }
          drawQrcode(options);
        })
     }
      
    },
   }
  })
</script>