当前位置: 首页 > news >正文

微信小程序生成二维码(weapp-qrcode)可添加logo

插件 npm 地址:https://www.npmjs.com/package/weapp-qrcode
插件 GitHub 地址:https://github.com/yingye/weapp-qrcode/tree/master

一、引入

1、根据 GitHub 指引将 weapp-qrcode 放到本地 uitl 文件夹下;
2、创建 canvas

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

3、在 js 文件中引入 weapp-qrcode 以及使用;

import drawQrcode from "../../utils/weapp-qrcode"
Page({onLoad() {this.handleCode();},handleCode(){drawQrcode({width:200,height:200,foreground:"red",canvasId:"code",text:"xxs",image:{imageResource:"../../assets/logo.png",dx:80,dy:80,dWidth:40,dHeight:40},callback(e){console.log(e)}})}
})

这里是添加了 logo 的二维码;相关参数请参考 GitHub 里面的表格;

二、注意

1、image 的路径如果是网络图片的话会显示不出来,需要使用 wx.getImageInfo(需要在小程序后台配置 download 域名)去获取图片信息;
2、image 图片格式是 svg 的时候不显示,需要替换成 png 的;
3、在回调函数 callback 中处理 canvas 的时候需要设置定时器以兼容安卓部分机型出现的问题;

最后

方法有很多,工具也有很多;找到适合自己项目的就行;下面分享几个我在见到还不错的文章以及插件,感兴趣的可以自己去试一下:
1、文章:小程序 做二维码带logo绘制二维码
2、插件GitHub:weapp-qrcode-canvas-2d

http://www.lryc.cn/news/98429.html

相关文章:

  • 【云原生】Docker容器资源限制(CPU/内存/磁盘)
  • 内核链表在用户程序中的移植和使用
  • 使用C#基于ComPDFKit SDK快速构建PDF阅读器
  • el-tabel导出excel表格
  • 双击start.bat文件闪退,运行报错“unable to access jarfile”
  • 大数据Flink(五十一):Flink的引入和Flink的简介
  • c语言的数据类型 -- 与GPT对话
  • Truffle 进行智能合约测试
  • vb+access库存管理系统设计与实现
  • 机器学习03-数据理解(小白快速理解分析Pima Indians数据集)
  • Hadoop生态体系-HDFS
  • 《实战AI模型》——赶上GPT3.5的大模型LLaMA 2可免费商用,内含中文模型推理和微调解决方案
  • 工程安全监测无线振弦采集仪在建筑物的应用分析
  • OpenCV实现照片换底色处理
  • 安科瑞智能型BA系列电流传感器
  • Windows SMB 共享文件夹 排错指南
  • nestjs+typeorm+mysql基本使用学习
  • echarts柱状图每根柱子添加警戒值/阈值,分段警戒线
  • 边缘提取总结
  • intellij 编辑器内性能提示
  • 手机python怎么用海龟画图,python怎么在手机上编程
  • 谈谈你对Synchronized关键字的理解及使用
  • 移动硬盘文件或目录损坏且无法读取
  • MySQL - 常用的命令
  • 【代理模式】了解篇:静态代理 动态代理~
  • LLM 大语言模型 Prompt Technique 论文精读-3
  • 架构重构实践心得
  • 【配置环境】Windows下 VS Code 远程连接虚拟机Ubuntu
  • 【设计模式——学习笔记】23种设计模式——组合模式Composite(原理讲解+应用场景介绍+案例介绍+Java代码实现)
  • vue3+Luckysheet实现表格的在线预览编辑(electron可用)