# 介绍
`uQRCode`是一款基于`Javascript`环境开发的二维码生成插件,适用所有`Javascript`运行环境的前端应用和`Node.js`应用。
`uQRCode`可扩展性高,它支持自定义渲染二维码,可通过`uQRCode API`得到二维码绘制关键信息后,使用`canvas`、`svg`或`js`操作`dom`的方式绘制二维码图案。还可自定义二维码样式,如随机颜色、圆点、方块、块与块之间的间距等。
欢迎加入群聊【uQRCode交流群】:[695070434](https://jq.qq.com/?_wv=1027&k=JRjzDqiw)。
# 设计器
uQRCode发布了配套的可视化设计器,可根据自己喜好在设计器中设计二维码样式,一键生成配置代码复制到项目中,详情请在微信小程序搜索“柚子二维码”,或扫描下方小程序码体验。
![uQRCode设计器](https://uqrcode.cn/mp_weixin_code.jpg)
## 设计器模板示例
![uQRCode设计器](https://uqrcode.cn/yz_1.png)
![uQRCode设计器](https://uqrcode.cn/yz_2.png)
![uQRCode设计器](https://uqrcode.cn/yz_3.png)
![uQRCode设计器](https://uqrcode.cn/yz_4.png)
![uQRCode设计器](https://uqrcode.cn/yz_5.png)
![uQRCode设计器](https://uqrcode.cn/yz_6.png)
![uQRCode设计器](https://uqrcode.cn/yz_7.png)
![uQRCode设计器](https://uqrcode.cn/yz_8.png)
![uQRCode设计器](https://uqrcode.cn/yz_9.png)
# 快速上手
> 在`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
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
Java小程序项目源码,该项目包含完整的前后端代码、数据库脚本和相关工具,简单部署即可运行。功能完善、界面美观、操作简单,具有很高的实际应用价值,非常适合作为Java毕业设计或Java课程设计使用。 所有项目均经过严格调试,确保可运行!下载后即可快速部署和使用。 1 适用场景: 毕业设计 期末大作业 课程设计 2 项目特点: 代码完整:详细代码注释,适合新手学习和使用 功能强大:涵盖常见的核心功能,满足大部分课程设计需求 部署简单:有基础的人,只需按照教程操作,轻松完成本地或服务器部署 高质量代码:经过严格测试,确保无错误,稳定运行 3 技术栈和工具 前端:小程序 后端框架:SSM/SpringBoot 开发环境:IntelliJ IDEA 数据库:MySQL(建议使用 5.7 版本,更稳定) 数据库可视化工具:Navicat 部署环境:Tomcat(推荐 7.x 或 8.x 版本),Maven
资源推荐
资源详情
资源评论
收起资源包目录
小程序项目-基于微信小程序的超市购物系统代码(包括源码,数据库,教程).zip (1612个子文件)
main.css.bak 66KB
uni-fab.vue.bak 8KB
3-build.bat 16B
2-run.bat 14B
1-install.bat 12B
app.387c5104.css 290KB
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
index.html 924B
index.html 576B
favicon.ico 4KB
favicon.ico 4KB
ShangpinOrderController.java 32KB
CommonController.java 27KB
YonghuController.java 20KB
ShangpinController.java 19KB
ShangpinOrderView.java 16KB
AddressController.java 16KB
ShangpinCollectionController.java 14KB
ShangpinCommentbackController.java 13KB
ShangpinCollectionView.java 13KB
CartController.java 13KB
ShangpinCommentbackView.java 13KB
CartView.java 13KB
ChatController.java 13KB
DictionaryController.java 12KB
GonggaoController.java 11KB
ShangpinEntity.java 11KB
ClazzDiff.java 9KB
ShangpinOrderEntity.java 8KB
ShangpinVO.java 8KB
YonghuEntity.java 8KB
ShangpinModel.java 7KB
ShangpinOrderVO.java 6KB
ChatView.java 6KB
AddressEntity.java 6KB
YonghuVO.java 6KB
AddressView.java 6KB
ChatEntity.java 6KB
ShangpinOrderModel.java 6KB
ShangpinCommentbackEntity.java 5KB
YonghuModel.java 5KB
MPUtil.java 5KB
DictionaryServiceImpl.java 5KB
GonggaoEntity.java 5KB
DictionaryEntity.java 5KB
CartEntity.java 5KB
UsersController.java 5KB
ShangpinCollectionEntity.java 4KB
AddressVO.java 4KB
ChatVO.java 4KB
ShangpinCommentbackVO.java 4KB
AddressModel.java 4KB
BaiduUtil.java 4KB
ChatModel.java 4KB
FileController.java 4KB
PoiUtil.java 4KB
ShangpinCommentbackModel.java 3KB
GonggaoVO.java 3KB
DictionaryVO.java 3KB
AuthorizationInterceptor.java 3KB
CartVO.java 3KB
GonggaoModel.java 3KB
DictionaryModel.java 3KB
CartModel.java 3KB
ShangpinCollectionVO.java 3KB
ConfigController.java 3KB
ShangpinCollectionModel.java 3KB
Query.java 3KB
ShangpinView.java 3KB
TokenServiceImpl.java 2KB
DictionaryServletContextListener.java 2KB
CommonServiceImpl.java 2KB
TokenEntity.java 2KB
YonghuView.java 2KB
PageUtils.java 2KB
GonggaoView.java 2KB
CommonUtil.java 2KB
InterceptorConfig.java 2KB
ShangpinCommentbackServiceImpl.java 1KB
ShangpinCollectionServiceImpl.java 1KB
ShangpinOrderServiceImpl.java 1KB
UsersServiceImpl.java 1KB
ShangpinServiceImpl.java 1KB
AddressServiceImpl.java 1KB
GonggaoServiceImpl.java 1KB
YonghuServiceImpl.java 1KB
ChatServiceImpl.java 1KB
CartServiceImpl.java 1KB
CommonService.java 1KB
UsersEntity.java 1KB
DictionaryView.java 1KB
CommonDao.java 1KB
共 1612 条
- 1
- 2
- 3
- 4
- 5
- 6
- 17
资源评论
gdutxiaoxu
- 粉丝: 1545
- 资源: 3287
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 小区团购-JAVA-基于springboot小区团购管理设计与实现(毕业论文)
- 卷积神经网络测试题解析:深入理解CNN核心知识点及应用场景
- 模特签约合同(对个人).doc
- 单相逆变器仿真模型 电压电流双闭环 双闭环PI控制 LC滤波 SPWM调制 输出交流电压220V 50Hz 图2为模型输出电压电流 功率波形 Matlab Simulink
- 送货工人劳动合同 (1).doc
- 社区养老服务-JAVA-基于springBoot3社区养老服务系统设计与实现(毕业论文)
- 基于深度学习的中文评论情感分类和智能客服研究与实现酒店和书店的评论情感分析python源码+报告文档+数据集
- 新员工试用期协议.doc
- 实习协议书(模板).doc
- 学生实习协议.doc
- 汽车修理厂聘用合同.doc
- 教师聘用合同-模版.doc
- 培训师聘用合同书.doc
- 教育培训机构劳动合同.doc
- 美术教师聘任合同书.doc
- 博世汽车电驱仿真模型,同步电机和异步电机模型,相电流完美波形 博世汽车电驱仿真模型,同步电机和异步电机模型,相电流完美波形,自动计算弱磁模型调用各种脚本进行foc控制,正反转切电流无波动,由于模型特殊
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功