微信小程序生成二维码工具类附带完整示例和源码
小程序二维码生成
源码地址
使用
复制src/qrcode.js到小程序目录下,直接引入即可使用
方法说明
// 通过RenderingContext绘制
function draw(ctx: any, options: any):void// 根据id绘制 一般使用这个
function drawById(id: any, options: any):void// 参数说明
/*
* @param ctx canvas RenderingContext实例,通过canvas.getContext('2d')返回
* @param id string "qrCode" cavans_id
* @param options object 选项
* @param options.text string 二维码内容
* @param options.width number 二维码的宽度
* @param options.height number 二维码高度
* @param options.correctLevel number 错误校正级别 级别越高 整体需要携带的信息越多:1可纠正约7%错误、0可纠正约15%错误、3可纠正约25%错误、2级别可纠正约30%错误。
默认为2
* @param options.background string color-string 背景颜色 默认白色"#ffffff"
* @param options.image object 二维码中加入图片
* @param options.image.x number 图片在canvas中的x轴坐标
* @param options.image.y number 图片在canvas中的y轴坐标
* @param options.image.width number 图片宽度 px
* @param options.image.height number 图片高度 px
* @param options.image.url string 图片地址 支持远程图片地址、本地图片地址、临时文件地址
*/
示例
- 普通绘制
wxml
<canvas style="width:128px;height:128px" type="2d" id="qrCode"></canvas>
js
import {drawById} from "../tools/qrcode"
drawById.call(wx,"qrCode",{text:"1233" , // 二维码内容
})
示意图
代码片段
地址
- 控制二维码大小
wxml
<canvas style="width:128px;height:128px" type="2d" id="qrCode"></canvas>
js
import {drawById} from "../tools/qrcode"
drawById.call(wx,"qrCode",{text:"1233" , // 二维码内容width:50, // 宽度 px内容自动转换像素比height:50, // 高度
})
示意图
代码片段
地址
- 加上图片
wxml
<canvas style="width:128px;height:128px" type="2d" id="qrCode"></canvas>
js
import {drawById} from "../tools/qrcode"
drawById.call(wx,"qrCode",{text:"1233",image:{url:"/images/money.png", // 支持远程图片、本地图片、临时图片width: 81, // 图片宽度height:93 // 图片高度}
})
示意图
代码片段
地址
其他
- 组件中使用,改变this指向即可
import {drawById} from "../tools/qrcode"
// 组件内需要从wx改位this
drawById.call(this,"qrCode",{text:"1233",image:{url:"/images/money.png", // 支持远程图片、本地图片、临时图片width: 81, // 图片宽度height:93 // 图片高度}
觉得好用的点个star吧( ̄▽ ̄)"
微信小程序生成二维码工具类附带完整示例和源码相关推荐
- 微信小程序生成二维码js
微信小程序生成二维码js 参考:https://github.com/tomfriwel/weapp-qrcode 最新的二维码工具:https://github.com/KeeeX/qrcodejs ...
- 【微信小程序生成二维码并下载,分享】
微信小程序生成二维码并保存,分享,下载 依赖工具 使用weapp-qrcode-base64库生成二维码的base64编码 链接:weapp-qrcode-base64 安装 npm install ...
- 微信小程序生成二维码,接口C接收值
微信小程序生成二维码,接口C接收值 深坑 解决 接口C替代方案 深坑 当我们用微信二维码生成接口c类型的二维码时,需要传入参数,而根据文档 我们填写 path时 传入参数例如 pah: page/in ...
- 【微信小程序】微信小程序生成二维码报错errcode=41030,invalid page rid
场景 调用微信小程序生成二维码接口,提示报错 错误内容 array(2) {["errcode"] => int(41030)["errmsg"] =&g ...
- 微信小程序生成二维码的两种方式
微信小程序生成二维码的两种方式 2020/11/10 第一种,利用网络api自动生成 <image class="xin-erma" src="{{'https:/ ...
- 微信小程序生成二维码带参海报
微信小程序生成二维码带参海报 没错,就是用 canvas 来实现 文章目录 微信小程序生成二维码带参海报 获取屏幕分辨率比 生成二维码 获取网络图片并转为本地临时文件 绘制背景图片以及二维码 代码片段 ...
- 微信小程序生成二维码可文字,链接,图片(支持中文)
功能简介 : 微信小程序生成二维码,支持文本和网址,支持中英文,输入框可清空,可单击保存二维码...... 核心代码 : createQrCode:function(url,canvasId,cavW ...
- 【精】微信小程序生成二维码海报分享 [原理+源码]
关于海报分享的教程数不胜数, 但是我没能找到一个好用的, 为了实现这个功能结合了三篇教程耗时三天才把海报搞定; 首先网络上教程都是直接上教程代码, 然后代码加思路, 对小白我来说就是一头雾水, 只能边 ...
- 微信小程序生成二维码scene过长解决方法
小程序二维码scene参数限定长度为32位字符,但是实际开发中可能有很多的参数需要传递,怎么办呢? 对于目前32位长度的限制,解决方案: 方案一.中间页 + 短参数新建一个中间空白跳转页面,每次生成的 ...
最新文章
- 树莓派安装python3.5+tensorflow_树莓派4B安装Tensorflow的方法步骤
- Oracle会话和进程数的监控
- Android Nougat 有望本月到来:支持手动曝光调节
- 【完整代码】使用Semaphore实现限流代码示例
- 基于plc计算机控制系统,基于PLC的工业控制系统特点的分析
- php sqlserver开发实例,Linux_用sql脚本创建sqlserver数据库范例语句,下面是创建一个sqlserver数据库 - phpStudy...
- JVM笔记详解之垃圾回收器
- 字符数组和字符串的小细节
- JS高级——内存管理和闭包
- Kaggle新赛:木薯叶疾病分类
- 1.2 文本域(含可编辑表格实现)
- Java字符串操作及处理
- Linux chapter 6
- 软考云题库Web版正式上线了
- 设计模式 | 单例模式
- 云大计算机初试最高分,【经验谈】初试总分360+,专业排名前五!云大社会工作专......
- 张无忌当年究竟对她做了什么?走进爱恨情仇,探究他与她之间的瓜葛!
- android打开蓝牙设置界面,Android 点击跳转到蓝牙设置界面
- 位操作技巧:Bit Twiddling Hacks
- C#中实现两个程序的通信