# 介绍
`uQRCode`是一款基于`Javascript`环境开发的二维码生成插件,适用所有`Javascript`运行环境的前端应用和`Node.js`应用。
`uQRCode`可扩展性高,它支持自定义渲染二维码,可通过`uQRCode API`得到二维码绘制关键信息后,使用`canvas`、`svg`或`js`操作`dom`的方式绘制二维码图案。还可自定义二维码样式,如随机颜色、圆点、方块、块与块之间的间距等。
欢迎加入群聊【uQRCode交流群】:[695070434](https://jq.qq.com/?_wv=1027&k=JRjzDqiw)。
# 快速上手
> 在`uni-app`中,我们更推荐使用组件方式来生成二维码,组件方式大大提高了页面的可读性以及避开了一些平台容易出问题的地方,当组件无法满足需求的时候,再考虑切换成原生方式。
官方文档:[https://doc.uqrcode.cn](https://doc.uqrcode.cn)。
github地址:[https://github.com/Sansnn/uQRCode](https://github.com/Sansnn/uQRCode)。
npm地址:[https://www.npmjs.com/package/uqrcodejs](https://www.npmjs.com/package/uqrcodejs)。
uni-app插件市场地址:[https://ext.dcloud.net.cn/plugin?id=1287](https://ext.dcloud.net.cn/plugin?id=1287)。
## 原生方式
原生方式仅需要获取`uqrcode.js`文件便可使用。
### 安装
1. 通过`npm`安装,成功后即可使用`import`或`require`进行引用。
``` bash
# npm安装
npm install uqrcodejs
# 或者
npm install @uqrcode/js
```
2. 通过项目开源地址获取`uqrcode.js`,下载`uqrcode.js`后,将其复制到您项目指定目录,在页面中引入`uqrcode.js`文件即可开始使用。
### 引入
- 通过`import`引入。
``` javascript
import UQRCode from 'uqrcode';
```
- `Node.js`通过`require`引入。
``` javascript
const UQRCode = require('uqrcode');
```
- 原生浏览器环境,在js脚本加载时添加到`window`。
``` html
<script type="text/javascript" src="uqrcode.js"></script>
<script>
var UQRCode = window.UQRCode;
</script>
```
> `vue3`推荐使用`npm`安装,非`npm`安装直接引入`uqrcode.js`文件如果出现报错:`SyntaxError: The requested module 'uqrcode.js' does not provide an export named 'default'`,在`uqrcode.js`文件中最后一行添加`export default uQRCode`即可。
### 简单用法
`uQRCode`基于`Canvas API`封装了一套方法,建议开发者使用`canvas`生成,一键调用,非常方便。以下是示例:
- HTML部分
``` html
<canvas id="qrcode" width="200" height="200"></canvas>
```
- JS部分
``` javascript
// 获取uQRCode实例
var qr = new UQRCode();
// 设置二维码内容
qr.data = "https://doc.uqrcode.cn";
// 设置二维码大小,必须与canvas设置的宽高一致
qr.size = 200;
// 调用制作二维码方法
qr.make();
// 获取canvas元素
var canvas = document.getElementById("qrcode");
// 获取canvas上下文
var canvasContext = canvas.getContext("2d");
// 设置uQRCode实例的canvas上下文
qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
qr.drawCanvas();
```
### 高级用法
考虑到部分平台可能不支持`canvas`,所以`uQRCode`并没有强制要求和`canvas`一起使用,您还可以选择其他方式来生成二维码,例如使用`js`操作`dom`进行绘制或是使用`svg`绘制等。以下是示例:
- js操作dom
``` html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>uQRCode二维码生成</title>
</head>
<body>
<div id="qrcode" style="position: relative;"></div>
<script type="text/javascript" src="uqrcode.js"></script>
<script>
// 引入uQRCode
var UQRCode = window.UQRCode;
// 获取uQRCode实例
var qr = new UQRCode();
// 设置二维码内容
qr.data = "https://doc.uqrcode.cn";
// 设置二维码大小,必须与canvas设置的宽高一致
qr.size = 200;
// 设置二维码前景图,可以是路径
qr.foregroundImageSrc =
'data:image/png;base64,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'
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
【资源介绍】 毕业设计基于Vue+UniAPP全栈开发的医疗小程序项目源码.zip毕业设计基于Vue+UniAPP全栈开发的医疗小程序项目源码.zip毕业设计基于Vue+UniAPP全栈开发的医疗小程序项目源码.zip毕业设计基于Vue+UniAPP全栈开发的医疗小程序项目源码.zip毕业设计基于Vue+UniAPP全栈开发的医疗小程序项目源码.zip毕业设计基于Vue+UniAPP全栈开发的医疗小程序项目源码.zip 毕业设计基于Vue+UniAPP全栈开发的医疗小程序项目源码.zip毕业设计基于Vue+UniAPP全栈开发的医疗小程序项目源码.zip毕业设计基于Vue+UniAPP全栈开发的医疗小程序项目源码.zip 毕业设计基于Vue+UniAPP全栈开发的医疗小程序项目源码.zip 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,也适用于小白学习入门进阶。当然也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或者热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载,沟通交流,互相学习,共同进步!
资源推荐
资源详情
资源评论
收起资源包目录
毕业设计基于Vue+UniAPP全栈开发的医疗小程序项目源码.zip (869个子文件)
bg.bmp 2.64MB
mvnw.cmd 7KB
mvnw.cmd 7KB
.gitignore 400B
.gitignore 59B
.gitignore 44B
.gitignore 37B
index.html 816B
index.html 672B
patient-wx-api.iml 23KB
VideoDiagnoseServiceImpl.java 15KB
RegistrationServiceImpl.java 13KB
KeyExpiredListener.java 9KB
DoctorWorkPlanScheduleServiceImpl.java 9KB
MedicalDeptSubWorkPlanServiceImpl.java 9KB
VideoDiagnoseServiceImpl.java 8KB
VideoDiagnoseJob.java 6KB
RegistrationController.java 6KB
VideoDiagnoseController.java 6KB
FaceAuthServiceImpl.java 5KB
DoctorServiceImpl.java 4KB
DoctorController.java 4KB
XssHttpServletRequestWrapper.java 4KB
XssHttpServletRequestWrapper.java 4KB
TrtcUtil.java 4KB
TrtcUtil.java 4KB
VideoDiagnoseController.java 4KB
UpdateDoctorForm.java 3KB
ExceptionAdvice.java 3KB
ExceptionAdvice.java 3KB
InitializeWork.java 3KB
MedicalDeptServiceImpl.java 3KB
InsertDoctorForm.java 3KB
MedicalDeptController.java 3KB
MedicalDeptSubWorkPlanController.java 3KB
MedicalDeptSubController.java 3KB
UserServiceImpl.java 3KB
PaymentServiceImpl.java 3KB
KeyExpiredListener.java 3KB
UserInfoCardController.java 2KB
WebSocketService.java 2KB
DoctorWorkPlanScheduleController.java 2KB
MedicalDeptServiceImpl.java 2KB
MedicalDeptSubServiceImpl.java 2KB
PrescriptionReceiver.java 2KB
RegisterMedicalAppointmentForm.java 2KB
HospitalApiApplicationTests.java 2KB
FaceAuthController.java 2KB
UpdateUserInfoCardForm.java 2KB
InsertUserInfoCardForm.java 2KB
UserInfoCardServiceImpl.java 1KB
DoctorPrescriptionController.java 1KB
SearchWorkPlanInRangeForm.java 1KB
UserController.java 1KB
SearchCanRegisterInDateRangeForm.java 1KB
MisUserController.java 1KB
InsertWorkPlanForm.java 1KB
QuartzUtil.java 1KB
SearchDoctorByPageForm.java 1KB
DoctorPrescriptionServiceImpl.java 1KB
MedicalDeptController.java 1KB
MedicalDeptSubController.java 1KB
MisUserServiceImpl.java 1KB
ThreadPoolConfig.java 1KB
ThreadPoolConfig.java 1KB
HospitalApiApplication.java 1KB
R.java 1KB
R.java 1KB
RedisTempplateConfig.java 973B
DoctorController.java 966B
RedisTemplateConfig.java 961B
VideoDiagnoseService.java 928B
CheckRegisterConditionForm.java 903B
MedicalRegistrationDao.java 899B
StpInterfaceImpl.java 888B
SearchDeptSubDoctorPlanInDayForm.java 883B
SearchDoctorWorkPlanScheduleForm.java 880B
SearchMedicalDeptSubByPageForm.java 868B
SearchDeptSubScheduleForm.java 866B
PageUtils.java 844B
PatientWxApiApplication.java 843B
PageUtils.java 833B
UpdateDoctorScheduleForm.java 828B
RegistrationService.java 827B
UpdateMedicalDeptForm.java 822B
XssFilter.java 815B
DoctorDao.java 809B
DoctorScheduleSlotVO.java 807B
RedisConfiguration.java 805B
HospitalException.java 805B
XssFilter.java 802B
HospitalException.java 794B
RedisConfiguration.java 794B
UpdateMedicalDeptSubForm.java 779B
SearchMedicalDeptByPageForm.java 752B
MedicalDeptSubServiceImpl.java 751B
CloseVideoDiagnoseJob.java 746B
DoctorEntity.java 673B
DoctorWorkPlanScheduleDao.java 666B
InsertMedicalDeptForm.java 665B
共 869 条
- 1
- 2
- 3
- 4
- 5
- 6
- 9
资源评论
.whl
- 粉丝: 3967
- 资源: 4917
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- libreport-gtk-2.1.11-53.el7.centos.x64-86.rpm.tar.gz
- 基于Qt协议的串口调试助手:带协议解析、帧判断、通信数据保存与自动配置功能,串口调试助手源代码 qt编写 带协议解析 帧判断 通信数据保存等功能 使用说明介绍 1.功能介绍: 采用Qt编写的串口调试助
- libreport-gtk-devel-2.1.11-53.el7.centos.x64-86.rpm.tar.gz
- 基于PID算法的智能车辆速度跟踪控制与学习入门指南-Carsim与Simulink联合仿真推荐版本,技术支持完备,基于PID的速度跟踪控制算法 #智能车辆速度跟踪控制carsim simulink联
- libreport-newt-2.1.11-53.el7.centos.x64-86.rpm.tar.gz
- libreport-plugin-kerneloops-2.1.11-53.el7.centos.x64-86.rpm.tar.gz
- libreport-plugin-logger-2.1.11-53.el7.centos.x64-86.rpm.tar.gz
- libreport-rhel-2.1.11-53.el7.centos.x64-86.rpm.tar.gz
- libreport-rhel-bugzilla-2.1.11-53.el7.centos.x64-86.rpm.tar.gz
- libreport-web-2.1.11-53.el7.centos.x64-86.rpm.tar.gz
- FPGA加速器实现深度学习CNN算法:从软件到硬件的高效部署与性能优化,CNN FPGA加速器实现(小型)CNN FPGA加速器实现(小型) 通过本工程可以学习深度学习cnn算法从软件到硬件fpg
- libreport-web-devel-2.1.11-53.el7.centos.x64-86.rpm.tar.gz
- librepository-1.1.3-9.el7.x64-86.rpm.tar.gz
- librepository-javadoc-1.1.3-9.el7.x64-86.rpm.tar.gz
- libreswan-3.25-9.1.el7-8.x64-86.rpm.tar.gz
- librevenge-0.0.2-2.el7.x64-86.rpm.tar.gz
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功