# 介绍
`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
3wb011汉中茗茶微系统小程序设计与实现_springboot+vue0+uniapp.zip （1781个子文件） 
main.css.bak 66KB uni-fab.vue.bak 8KB 3-build.bat 16B 2-run.bat 14B 1-install.bat 12B app.b71eaf2e.css 289KB icon.css 71KB main.css 68KB chunk-vendors.1f0a25b2.css 37KB uniicons.css 8KB global-restaurant.css 7KB mescroll-uni.css 4KB animation.css 3KB style.css 2KB theme.css 135B
汉中茗茶微系统表结构.docx 350KB 微信小程序+springboot技术文档.docx 13KB
index.html 927B index.html 579B favicon.ico 4KB favicon.ico 4KB CommonController.java 27KB ChayeOrderController.java 27KB YonghuController.java 21KB ChayeController.java 19KB AddressController.java 17KB LishijieshaoController.java 15KB ChayeOrderView.java 15KB ForumController.java 14KB ChayeCollectionController.java 14KB ChayeCommentbackController.java 14KB CartController.java 13KB GonggaoController.java 12KB DictionaryController.java 12KB ChayeCollectionView.java 12KB ChayeCommentbackView.java 11KB CartView.java 11KB ChayeEntity.java 10KB ClazzDiff.java 9KB ChayeOrderEntity.java 8KB ChayeVO.java 8KB LishijieshaoEntity.java 7KB YonghuEntity.java 7KB ChayeModel.java 7KB ForumEntity.java 7KB ForumView.java 7KB ChayeOrderVO.java 6KB AddressEntity.java 6KB UsersController.java 6KB ChayeCommentbackEntity.java 5KB ChayeOrderModel.java 5KB LishijieshaoVO.java 5KB MPUtil.java 5KB DictionaryServiceImpl.java 5KB YonghuVO.java 5KB DictionaryEntity.java 5KB GonggaoEntity.java 5KB AddressView.java 5KB CartEntity.java 5KB LishijieshaoModel.java 5KB ForumVO.java 5KB YonghuModel.java 4KB ForumModel.java 4KB ChayeCollectionEntity.java 4KB AddressVO.java 4KB AddressModel.java 4KB ChayeCommentbackVO.java 4KB BaiduUtil.java 4KB FileController.java 4KB PoiUtil.java 4KB ChayeCommentbackModel.java 3KB GonggaoVO.java 3KB DictionaryVO.java 3KB AuthorizationInterceptor.java 3KB CartVO.java 3KB GonggaoModel.java 3KB DictionaryModel.java 3KB CartModel.java 3KB ConfigController.java 3KB ChayeCollectionVO.java 3KB ChayeCollectionModel.java 3KB Query.java 3KB TokenServiceImpl.java 2KB DictionaryServletContextListener.java 2KB CommonServiceImpl.java 2KB TokenEntity.java 2KB ChayeView.java 2KB YonghuView.java 2KB PageUtils.java 2KB LishijieshaoView.java 2KB GonggaoView.java 2KB CommonUtil.java 2KB InterceptorConfig.java 2KB ChayeCommentbackServiceImpl.java 1KB ChayeCollectionServiceImpl.java 1KB LishijieshaoServiceImpl.java 1KB ChayeOrderServiceImpl.java 1KB UsersServiceImpl.java 1KB AddressServiceImpl.java 1KB GonggaoServiceImpl.java 1KB共 1781 条
- 1
- 2
- 3
- 4
- 5
- 6
- 18
资源评论
Java_IoT攻诚狮
- 粉丝: 1w+
- 资源: 3878
最新资源
- 模糊滑膜轨迹跟踪控制算法：实现多种轨迹跟踪功能，稳定性和高效性表现优越，适用于车辆横向控制算法学习入门 推荐使用csrsim8.02和matlab2016b版本 ,轨迹跟踪控制算法 模糊＋滑膜轨迹跟踪
- 一种用于遥感图像检索的双重注意力深度神经网络.pdf
- 基于卷积滤波的纱筒定 位检测算法.pdf
- 基于离散小波变换和最大熵模糊聚类的频谱感知技术.pdf
- 一种基于企业级云的云模 式构架.pdf
- 基于目标规划法的灰色Verhulst负荷预测模型.pdf
- 基于Unity的智能交互虚拟文物展览馆.pdf
- 优化LangChain框架中的文档分割方法：方法与应用.pdf
- 基于COFDM的单兵视频通信系统研究.pdf
- 无线 传感器网络拓扑管理模 式的分析.pdf
- LabVIEW面向对象编程之简单工厂模式解析：基于Modbus的RS485通讯Demo详解与实操视频,LabVIEW 面向对象编程(oop)-简单工厂模式程序Demo,基于Modbus的RS485通讯
- 基于用户坐标距离与误差修正的推荐算法.pdf
- 基于NI Vision Assistant的樱桃缺陷检测方法.pdf
- 铝板焊接过程中温度场的有限元模拟.pdf
- 基于XML的变压器故障诊断系统数据接口设计与实现.pdf
- 基于Matlab实现车牌识别技术：灰度处理、字符分割与模板匹配应用,基于Matlab的车牌识别基于Matlab的车牌识别，包括灰度处理，字符分割，采用模板匹配 ,核心关键词：基于Matlab; 车
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
