uniapp 5+App项目中使用QR Code Styling绘制可设置码点、码眼、logo等样式的二维码

使用插件:QR Code Styling

插件主页https://qr-code-styling.com/
插件github地址

使用该插件时需要拉取githu中的源码到本地后,自行编译,然后将编译后的入口文件存放到项目文件中进行使用。因为5+APP项目不支持操作DOM,所以必需修改部分源码才能正常运行。
由于这个插件的绘制需要依赖dom,所以在uniapp的5+APP项目中使用的,需要uniapp的renderjs,即在script标签中声明lang为renderjs。
我使用时是将这个插件封装成了一个组件,在每次使用时只需要通过父级传入二维码的配置即可生成二维码。
以下是主要思路:

  1. 父级传入配置项后,通知renderjs模块,并将新的配置项传入renderjs模块;
  2. 在renderjs模块中,使用QR Code Styling插件进行二维码的绘制
  3. 绘制结束后调用插件中的API将canvas转成blod文件并返回
  4. 将返回的blod文件转成base64编码,并在页面中的image元素使用该编码,完成二维码的渲染。

在开始使用插件前,主要需要解决的问题是renderjs的通信问题,因为是通过父级传入的二维码配置项。

<view :obj="obj" :change:obj="qrcode.setCodeStyle"></view>
<
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值