使用插件:QR Code Styling
插件主页https://qr-code-styling.com/
插件github地址
使用该插件时需要拉取githu中的源码到本地后,自行编译,然后将编译后的入口文件存放到项目文件中进行使用。因为5+APP项目不支持操作DOM,所以必需修改部分源码才能正常运行。
由于这个插件的绘制需要依赖dom,所以在uniapp的5+APP项目中使用的,需要uniapp的renderjs,即在script标签中声明lang为renderjs。
我使用时是将这个插件封装成了一个组件,在每次使用时只需要通过父级传入二维码的配置即可生成二维码。
以下是主要思路:
- 父级传入配置项后,通知renderjs模块,并将新的配置项传入renderjs模块;
- 在renderjs模块中,使用QR Code Styling插件进行二维码的绘制
- 绘制结束后调用插件中的API将canvas转成blod文件并返回
- 将返回的blod文件转成base64编码,并在页面中的image元素使用该编码,完成二维码的渲染。
在开始使用插件前,主要需要解决的问题是renderjs的通信问题,因为是通过父级传入的二维码配置项。
<view :obj="obj" :change:obj="qrcode.setCodeStyle"></view>
<