# 介绍
`uQRCode`是一款基于`Javascript`环境开发的二维码生成插件，适用所有`Javascript`运行环境的前端应用和`Node.js`应用。
`uQRCode`可扩展性高，它支持自定义渲染二维码，可通过`uQRCode API`得到二维码绘制关键信息后，使用`canvas`、`svg`或`js`操作`dom`的方式绘制二维码图案。还可自定义二维码样式，如随机颜色、圆点、方块、块与块之间的间距等。
欢迎加入群聊【uQRCode交流群】：[695070434](https://jq.qq.com/?_wv=1027&k=JRjzDqiw)。
# 设计器
uQRCode发布了配套的可视化设计器，可根据自己喜好在设计器中设计二维码样式，一键生成配置代码复制到项目中，详情请在微信小程序搜索“柚子二维码”，或扫描下方小程序码体验。
## 设计器模板示例
# 快速上手
> 在`uni-app`中，我们更推荐使用组件方式来生成二维码，组件方式大大提高了页面的可读性以及避开了一些平台容易出问题的地方，当组件无法满足需求的时候，再考虑切换成原生方式。
官方文档：[https://uqrcode.cn/doc](https://uqrcode.cn/doc)。
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`文件便可使用。详细配置请移步到：文档 > [原生](https://uqrcode.cn/doc/document/native.html)。
### 安装
1. 通过`npm`安装，成功后即可使用`import`或`require`进行引用。
``` bash
# npm安装
npm install uqrcodejs
# 或者
npm install @uqrcode/js
```
2. 通过项目开源地址获取`uqrcode.js`，下载`uqrcode.js`后，将其复制到您项目指定目录，在页面中引入`uqrcode.js`文件即可开始使用。
### 引入
- 通过`import`引入。
``` javascript
// npm安装
import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
// 或者
import UQRCode from '@uqrcode/js'; // npm install @uqrcode/js
```
- `Node.js`通过`require`引入。
``` javascript
// npm安装
const UQRCode = require('uqrcodejs'); // npm install uqrcodejs
// 或者
const UQRCode = require('@uqrcode/js'); // npm install @uqrcode/js
```
- 原生浏览器环境，在js脚本加载时添加到`window`。
``` html
<script type="text/javascript" src="uqrcode.js"></script>
<script>
var UQRCode = window.UQRCode;
</script>
```
### 简单用法
`uQRCode`基于`Canvas API`封装了一套方法，建议开发者使用`canvas`生成，一键调用，非常方便。以下是示例：
- HTML示例
- DOM部分
``` html
<canvas id="qrcode" width="200" height="200"></canvas>
```
- JS部分
``` javascript
// 获取uQRCode实例
var qr = new UQRCode();
// 设置二维码内容
qr.data = "https://uqrcode.cn/doc";
// 设置二维码大小，必须与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();
```
- uni-app示例
- Template部分
``` html
<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
```
- JS部分
``` javascript
onReady() {
// 获取uQRCode实例
var qr = new UQRCode();
// 设置二维码内容
qr.data = "https://uqrcode.cn/doc";
// 设置二维码大小，必须与canvas设置的宽高一致
qr.size = 200;
// 调用制作二维码方法
qr.make();
// 获取canvas上下文
var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
// 设置uQRCode实例的canvas上下文
qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
qr.drawCanvas();
}
```
- 微信小程序，推荐使用Canvas 2D，关于Canvas 2D的使用请参考微信开放文档。
### 高级用法
考虑到部分平台可能不支持`canvas`，所以`uQRCode`并没有强制要求和`canvas`一起使用，您还可以选择其他方式来生成二维码，例如使用`js`操作`dom`进行绘制或是使用`svg`绘制等。以下是示例：
- uni-app v-for+view
```html
<template>
<view>
<view class="qrcode">
<view v-for="(row, rowI) in modules" :key="rowI" style="display: flex;flex-direction: row;">
<view v-for="(col, colI) in row" :key="colI">
<view v-if="col.isBlack" style="width: 10px;height: 10px;background-color: black;">
<!-- 黑色码点 -->
</view>
<view v-else style="width: 10px;height: 10px;background-color: white;">
<!-- 白色码点 -->
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
export default {
data() {
return {
modules: []
}
},
onLoad() {
const qr = new UQRCode();
qr.data = 'uQRCode';
qr.make();
this.modules = qr.modules;
},
methods: {
}
}
</script>
```
- 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://uqrcode.cn/doc";
// 设置二维码大小，必须与canvas设置的宽高一致
qr.size = 200;
// 设置二维码前景图，可以是路径
qr.foregroundImageSrc =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAC3xJREFUeJztnd1vFNcZxodSJ3y3EL7SYIQwu15wI5FSAkqVkISKgEkuSIEC6127RrloL9r8D4n5UFUZp/9C24A/okqUOzCmSdoohQtkXIkiRS1VC7YQF41Kbe/unL7PzHt2z45ndnZmd1l75hzrSSwzMzvn+c15z8ee3dcwdIlkWaRlqSnF62a+4dDiiMtZ36cKyc183NQ3WS2sZ2IqWX/phwTWEDhuEKT5S0hLSctJK1grWasiLllPWe9l7MUSowTJDU7oopKVICSEZXwz3yKtJj1HWkdaT9pA2hgTbeA6r2MPVrMnEpCEI8HU1FpUGC18cbQEPB1r+Ea+Q2olbSFtJbWREqxkxCXr2cZ1hwebSM+zN2vYq+XsXYtRQ2uRJ8hWgaa4kl8ET0Ur30SK9F3STtL3SLtJL5P2kPZGXHu4rru57vCgg9TO3mxir1azd0uNUmuRUALBWKzAAOm1pBcM+4nYwTeBG3uNtJ/0FukQqZP0NuudiErWr5PrfID0JulVwwb1Enu0lT1byx6qUKpqJWoH3qLAQIzcbNhNFU/CKwzhMOld0o9JaVKW1EP6CamXdDqi6uU69nCdUffjpCPsyZvs0U72bDN7KKHI8OULRcIAQcQ9NDXQRYhCeNpF2ocXPXjw4M8uX748eP/+/b9NT08/ETEv8ABekCcXDx069FMGs489SzGUtezpEqPK0KWGKnRGiH8vMGVc+I1UKnXy3r17N5ttwHwvd+/e/bKjo+Mkt5bvG3bfAi/RD69gj2Ur8YQhO/Il3LzQKbVx09t35MiR9x4/fvzvZld2oRTy6l8HDhxAiHvdsPsVeInhMobGSw2fvkTtO5YxSYQqdE6Ih4cnJiY+b3YlF1q5ffv2p4Y9APiBYY/CELqe4wj0TKWwpYYrxLn1TBSjqf1Hjx79eYGK3w1sGz4VK/kVeHbs2LFfkIc/ZC/b2FtEoGcrhS01XKFJYdKHzghD28NjY2N/0BDCwSHvrnAreYU9RV/ybUfY8gSyVAlXmPRhnvHuw4cP/65hhIPy4MGDf5CHPzLsUdeLHLbWVAKi9h/LOcZtM
springboot框架基于微信小程序的驾校预约平台代码的实现.rar （1476个子文件） 
main.css.bak 66KB uni-fab.vue.bak 8KB 3-build.bat 16B 2-run.bat 14B 1-install.bat 12B app.29ad549a.css 287KB icon.css 71KB main.css 68KB chunk-vendors.a72b0961.css 37KB uniicons.css 9KB global-restaurant.css 7KB mescroll-uni.css 4KB animation.css 3KB style.css 2KB theme.css 135B
技术文档.docx 13KB
index.html 924B index.html 576B favicon.ico 4KB favicon.ico 4KB CommonController.java 27KB JiaolianController.java 25KB YonghuController.java 21KB KaoshixYuyueController.java 17KB JiaolianYuyueController.java 17KB ForumController.java 15KB JiaolianCollectionController.java 15KB JiaolianLiuyanController.java 14KB KaoshixController.java 13KB JiaoxiaoController.java 13KB DictionaryController.java 12KB NewsController.java 11KB ForumView.java 9KB ClazzDiff.java 9KB JiaolianCollectionView.java 8KB JiaolianYuyueView.java 8KB KaoshixYuyueView.java 8KB JiaolianLiuyanView.java 8KB JiaolianEntity.java 8KB YonghuEntity.java 7KB KaoshixEntity.java 7KB ForumEntity.java 7KB JiaolianYuyueEntity.java 6KB JiaolianVO.java 6KB UsersController.java 6KB JiaolianLiuyanEntity.java 5KB JiaoxiaoEntity.java 5KB MPUtil.java 5KB DictionaryServiceImpl.java 5KB JiaolianModel.java 5KB YonghuVO.java 5KB KaoshixVO.java 5KB KaoshixYuyueEntity.java 5KB DictionaryEntity.java 5KB ForumVO.java 5KB NewsEntity.java 5KB KaoshixModel.java 5KB YonghuModel.java 5KB JiaolianYuyueVO.java 4KB JiaolianCollectionEntity.java 4KB ForumModel.java 4KB JiaolianYuyueModel.java 4KB JiaolianLiuyanVO.java 4KB JiaoxiaoVO.java 4KB BaiduUtil.java 4KB FileController.java 4KB PoiUtil.java 4KB JiaolianLiuyanModel.java 3KB KaoshixYuyueVO.java 3KB JiaoxiaoModel.java 3KB DictionaryVO.java 3KB AuthorizationInterceptor.java 3KB NewsVO.java 3KB KaoshixYuyueModel.java 3KB DictionaryModel.java 3KB NewsModel.java 3KB JiaolianCollectionVO.java 3KB ConfigController.java 3KB JiaolianCollectionModel.java 3KB Query.java 3KB TokenServiceImpl.java 2KB DictionaryServletContextListener.java 2KB CommonServiceImpl.java 2KB TokenEntity.java 2KB JiaolianView.java 2KB PageUtils.java 2KB JiaoxiaoView.java 2KB KaoshixView.java 2KB CommonUtil.java 2KB NewsView.java 2KB YonghuView.java 2KB InterceptorConfig.java 2KB JiaolianCollectionServiceImpl.java 1KB JiaolianLiuyanServiceImpl.java 1KB JiaolianYuyueServiceImpl.java 1KB KaoshixYuyueServiceImpl.java 1KB JiaoxiaoServiceImpl.java 1KB UsersServiceImpl.java 1KB JiaolianServiceImpl.java 1KB KaoshixServiceImpl.java 1KB共 1476 条
- 1
- 2
- 3
- 4
- 5
- 6
- 15
资源评论
程序猿阿存
- 粉丝: 1244
- 资源: 1805
最新资源
- 西门子PLC博途3种自动流程程序写法 本案例介绍3种不同的方法去写自动流程程序 第一种是用scl case语录，另外的两种使用梯形图的模式去写 使用此类方法去写，清晰明了，非常使用 并且针对程序
- LabVIEW串口通讯Delta台达PLC，Modbus 官方协议，报文读取，安全稳定 程序代开发，代写程序 通讯配置，辅助测试 PLC无需编写程序 1.命令帧读写 2.支持 I16 I32
- 西门子SMART200 PLC梯形图，昆仑通态触摸屏组态程序，燃气燃油蒸汽锅炉平衡容器差压变送器连续给水程序，程序CAD原理图图纸全套打包
- MATLAB基于肤色分割的静态手势识别，带源码带gui面板，程序运行和图上一致，能用指定图片识别出12345，程序注释全 关键字 MATLAB 手势识别 静态 源码 程序 GUI
- Comsol BIC拓扑远场偏振计算 本征模式偏振态计算 此为复杂分解算法，有文献 通用算法见架另一案例，有意私 (两种算法暂无法甄选对错)
- 基于matlab的rbf神经网络对 excel中的数据进行预测，粒子群优化神经网络，遗传算法优化rbf神经网络，鲸鱼优化rbf神经网络 基于混沌映射改进的自适应权重的鲸鱼算法优化rbf神经网络
- 龙格库塔优化算法优化最小二乘支持向量机 龙格库塔优化算法 （RUN-LSSVM)用于分类，分类，回归预测最新代码
- 三菱FX1s与东元Teco N310变频器通讯实战程序 直接拿来实用了，三菱FX PLC与东元N310变频器modbus RTU通讯 采用器件：三菱FX1s 30MR PLC，1个FX1N 4
- PMSM永磁同步电机复合控制，MATLAB SIMULINK仿真软件，MRAS和HF的高低速复合控制，模型参考自适应和高频注入法的复合控制，无速度传感器矢量控制，波形正常，可教学，图二为转速曲线图，图
- 单相全桥PWM整流双闭环控制 电压环采用PI控制器，电流环采用PR控制器；可以实现整流器交流侧单位功率因数，直流侧电压恒定 额定：交流侧电压60V，电流10A，直流侧电压150V 图为电阻1秒
- 考虑蓄电池，市场购电电约束，功率平衡约束，以总费用最低为目标函数，适合新手学习参考 电网程序matlab,有参考文档 标价即卖价，不议价，不，程序是可以运行的 仿真平台：MATLAB+CPLE
- 特征选择算法 基于麻雀搜索算法的同步优化特征选择 特征选择 优化 麻雀搜索算法 同步优化 基于阿基米德算法的同步优化特征选择 基于鲸鱼优化算法的同步优化特征选择 基于狼群优化算法的同步优化特征选择 基
- 基于51单片机烘干机设计 程序、仿真、原文（另算） 功能： 1.系统可以通过按键选择操作方式，一键式操作自主解决想要的吹冷风，还是吹热风； 2.本系统可以对烘干机的进行节能控制，具体就是在使用时，红外
- 新能源汽车车载双向OBC，PFC，LLC，V2G 双向 充电桩 电动汽车 车载充电机 充放电机 MATLAB仿真模型 （1）基于V2G技术的双向AC DC、DC DC充放电机MATLAB仿真模型； （
- 三菱FX3U底层源码,PLSR源码 总体功能和指令可能支持在RUN中下载程序，支持注释的写入和读取，有脉冲输出与定位指令(包括PLSY PWM PLSR PLSV DRVI DRVA 等指令)
- 程序名称：汽车平顺性仿真与评价 开发平台：基于matlab平台 计算内容：建立simulink平顺性仿真模型（单轮），构建随机路面谱模型，RMS计算与评价，按国标对各测点的倍频程和加权加速度均方根值运
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
