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

2023-11-13   阅读:762   分类:后端    标签: 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>
【腾讯云】 爆款2核2G3M云服务器首年 61元,2核2G4M云服务器新老同享 99元/年,续费同价

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/1025.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×