如何在uniapp中实现二维码生成功能

官方文档:https://uqrcode.cn/doc。

github地址:https://github.com/Sansnn/uQRCode。

npm地址:https://www.npmjs.com/package/uqrcodejs。

uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=1287

javascript 复制代码
<canvas canvas-id="myCanvas" style="width: 200px;height: 200px;"></canvas>
javascript 复制代码
import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
javascript 复制代码
let qr = new UQRCode();
// 设置二维码内容
qr.data = 'https://uqrcode.cn/doc'
// 设置二维码大小,必须与canvas设置的宽高一致
qr.size = 200;
// 调用制作二维码方法
qr.make();
// 获取canvas上下文
let canvasContext = uni.createCanvasContext('myCanvas', this); // 如果是组件,this必须传入
// 设置uQRCode实例的canvas上下文
qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
qr.drawCanvas();
相关推荐
乔冠宇3 小时前
微信小程序修改个人信息头像(uniapp开发)
微信小程序·小程序·uni-app
一个处女座的程序猿O(∩_∩)O7 小时前
Uniapp 开发中遇到的坑与注意事项:全面指南
uni-app
Elena_Lucky_baby7 小时前
uniapp 网络请求封装(uni.request 与 uView-Plus)
uni-app
黑云压城After11 小时前
uniapp小程序自定义日历(签到、补签功能)
小程序·uni-app
烂蜻蜓11 小时前
Uniapp 设计思路全分享
前端·css·vue.js·uni-app·html
Elena_Lucky_baby11 小时前
uniapp封装请求
uni-app
尚学教辅学习资料12 小时前
基于SpringBoot+Vue+uniapp的高校招聘小程序+LW参考示例
spring boot·uni-app·招聘系统
岑梓铭14 小时前
uniapp邪门事件
uni-app
漫天绯羽15 小时前
uniapp 中使用天地图,安卓端、h5
uni-app
尚学教辅学习资料17 小时前
基于SpringBoot+vue+uniapp的智慧旅游小程序+LW示例参考
vue.js·spring boot·uni-app·旅游