wx-qr v0.1.2

wx-qr

介绍

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

样例

仓库地址

• 码云地址
• github

开发及测试环境

• 微信小程序基础库：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 绘制，但由于微信小程序众所周知的原因不支持真机调试 Canvas ，只能通过开发者工具以及手机预览功能进行查看。

API

props

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

ComponentOptions属性

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

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

Events

Methods

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

<qr-container id="qr">

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

说明

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