• 使用vue-qr生成支付二维码
  • 发布于 2个月前
  • 2267 热度
    0 评论
  • 酸梅汤
  • 0 粉丝 8 篇博客
  •   
最近接了一个扫码支付的页面。网上生成二维码的库很多,如 qrcode(JQ实现的),vue-qr,今天就讨论一下,如何使用vue-qr 实现一个支付二维码。
npm install vue-qr --save
引入页面
import VueQr from 'vue-qr';
export default {
  components: {
    VueQr,
  },
}
3.插入template
<vue-qr :logo-src="logoSrc"
          :size="191"
          :margin="0"
          :auto-color="true"
          :dot-scale="1"
          :text="appSrc" />
4.设置默认数据
data() {
    return {
      logoSrc: '',
      appSrc: '',
      payInfo: {},
      isError: false
    };
  },
5.接入接口数据
 async getDetails(params) {
      try {
        const { data } = await API.getPayDetail(params);
        this.payInfo = data;
        this.appSrc = data.payUrl;
        this.logoSrc = providerIconMap[data.supplierCode];
      } catch (err) {
        // if (err.code !== 1) {
        //   this.isError = true;
        // }
      }
    },
6.刷新页面
二维码就不来了。很简单。
7.分析
text:编码的内容
size: 尺寸, 长宽一致, 包含外边距
margin: 二维码图像的外边距, 默认 20px
colorDark: 实点的颜色
colorLight: 空白区的颜色
bgSrc: 欲嵌入的背景图地址
backgroundDimming: 叠加在背景图上的颜色, 在解码有难度的时有一定帮助
logoSrc: 欲嵌入至二维码中心的 LOGO 地址
logoScale: 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2f
logoMargin: LOGO 标识周围的空白边框, 默认为0
logoCornerRadius: 标识及其边框的圆角半径, 默认为0
whiteMargin: 若设为 true, 背景图外将绘制白色边框
dotScale: (0 < scale < 1.0f) 数据区域点缩小比例
autoColor: 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark
binarize: 若为 true, 图像将被二值化处理, 未指定阈值则使用默认值
binarizeThreshold:(0 < threshold < 255) 二值化处理的阈值
callback: 生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)
bindElement: 指定是否需要自动将生成的二维码绑定到HTML上, 默认是TRUE
这是这个包的参数说明,
这边主要说:
margin: 一定要设置为0
size:就是你交互稿上二维码的大小(如果margin 不为0 ,就会莫名其妙的挤压生成的图片)
dot-scale=1 让你的数据保持原来尺寸,如果迷得连接特别长,可以用缩放,如果不是特别长,就设置为1,不然生成的二维码密密麻麻,有些商家的二维码密密麻麻,就是连接太长,导致的,加上不缩放。
text:这个是必须要写的参数,如果设置为普通文本,那么扫码转跳就会显示设置的文本。这里设置为连接,是让页面跳转用的。
bgSrc:是这只二维码的背景的(一般不要用,不然导致二维码太花了。。。。),
logoSrc:就是商家的logo 图片。
用户评论