wx-qr

version

介绍

基于Awesome-qr.js修改开发，并能够完美适配微信小程序的二维码组件。

样例

仓库地址

开发及测试环境

微信小程序基础库：2.15.0
开发者工具版本：1.05.2112172

预览

微信开发者工具打开

安装

方法一：通过 npm 安装（推荐）

# 通过 npm 安装
npm i wx-qr -S

# 通过 yarn 安装
yarn add wx-qr

方法二：直接下载使用

通过 git 下载 wx-qr 源代码，并将根目录中的 dist 文件夹拷贝到自己的项目中去

git clone git@github.com:liuxdi/wx-qr.git

使用组件

首先在你所开发的小程序根目录 app.json 或需要使用该组件的 xxx.json 中引用组件

（注意：请不要将组件命名为 wx-xxx 开头，可能会导致微信小程序解析 tag 失败）

{
  "usingComponents": {
    "qr-container": "wx-qr"
  }
}

之后就可以在 wxml 中直接使用组件

WXML

<qr-container text="{{qrTxt}}" size="750"></qr-container>

js

Page({
    data: {
        qrTxt: 'https://github.com/liuxdi/wx-qr',
    },
});

注意

本库二维码基于 Canvas 绘制，但由于微信小程序众所周知的原因不支持真机调试(1.0版本) Canvas ，只能通过开发者工具以及手机预览功能进行查看。
若开发者工具版本大于1.05.2107221，并且调试机型符合要求的，可以通过真机调试2.0查看。

API

props

props中涉及到的属性，都是可选的，如果不传，则使用默认值。若是涉及大小的属性，不传单位则默认为 rpx 。

参数	说明	类型	默认值
text	二维码内容	`String`	''
size	二维码尺寸，若无单位，则默认为 rpx	`'Number'\|'String'`	`200rpx`
dotScale	每块二维码点的大小	`Number`	`1`
backgroundImage	二维码背景图片	`String`	''
backgroundDimming	背景图上掩膜的颜色	`String`	`rgba(0,0,0,0)`
logoImage	二维码中间的 logo 图片	`String`	''
logoScale	logo 图片占整个二维码比例	`Number`	`0.2`
logoMargin	logo 图片距离二维码的距离, 若无单位，则默认为 rpx	`Number`	`0`
canvasMode	是否使用 canvas 绘制二维，默认以图片形式展示	`Boolean`	`false`
showMenuByLongpress	在canvasMode=false时，是否长按显示菜单	`Boolean`	`true`
margin	二维码边距，若无单位，则默认为 rpx	`'Number' \| 'String'`	`10rpx`
correctLevel	二维码纠错等级详见	`Number`	`0`
maskPattern	二维码自定义掩码详见	`Number` \| `null`	`null`
version	二维码版本详见	`Number` \| `null`	`null`
components	二维码中控制组件的选项	`ComponentOptions`	`{}`
colorDark	二维码颜色，若设置此项，需将 `autoColor=false`	`String`	`#000000`
colorLight	二维码背景色，若设置此项，需将 `backgroundImage=''`	`String`	`#FFFFFF`
autoColor	是否自动根据背景图配置二维码颜色	`Boolean`	`false`
whiteMargin	如果有margin的话是否展示白色的边	`Boolean`	`false`
logoCornerRadius	logo圆角大小，若无单位，则默认为 rpx	`Number`	`0`

ComponentOptions属性

/*
  scale: 二维码指定区域中块的比例。
  protectors: 控制是否在二维码指定区域中绘制半透明保护。
*/

type ComponentOptions = {
  data?: {
    scale?: number;
  };
  timing?: {
    scale?: number;
    protectors?: boolean;
  };
  alignment?: {
    scale?: number;
    protectors?: boolean;
  };
  cornerAlignment?: {
    scale?: number;
    protectors?: boolean;
  };
};

Events

事件名称	说明	返回
load	当二维码加载完成时触发, 返回文件临时目录	`string`
error	当二维码加载失败时触发	错误信息

Methods

可以通过小程序API selectComponent 来获取到对应的组件实例，然后调用对应的方法。例:

<qr-container id="qr">

const qrContainer = this.selectComponent('#qr');
console.log(qrContainer.getQrFile());

方法名称	说明	返回
getQrFile	获取二维码图片，返回二维码的临时文件位置	`string`
getQrBase64	获取二维码图片base64	`string`

说明

微信小程序由于框架限制，不支持通过document创建Canvas，而Awesome-qr.js库是基于 node/浏览器的能力生成 Canvas 进行绘制，该库是在其基础上对整体逻辑进行较大幅度修改，使之能适配微信小程序。
也是由于微信小程序限制，目前无法实现如 gif 等动态底图，

孑孓 / wx-qr

wx-qr

介绍

样例

仓库地址

开发及测试环境

预览

安装

方法一：通过 npm 安装（推荐）

方法二：直接下载使用

使用组件

注意

API

props

Events

Methods

说明

简介

发行版

贡献者

近期动态

孑孓 / wx-qr .gitee-modal { width: 500px !important; }

wx-qr

介绍

样例

仓库地址

开发及测试环境

预览

安装

方法一：通过 npm 安装（推荐）

方法二：直接下载使用

使用组件

注意

API

props

Events

Methods

说明

简介

发行版

贡献者

近期动态

搜索帮助

孑孓 / wx-qr