# 介绍
`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
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
基于Spring Boot框架的微信小程序机电公司管理信息系统旨在为机电公司提供一个便捷、高效的管理平台,帮助公司管理人员实时监控和管理公司的各项业务。该系统充分利用了Spring Boot框架的快速开发特性和微信小程序的便捷性,为公司管理人员提供了一个方便、灵活的管理工具。 系统的主要功能包括订单管理、库存管理、员工管理、客户管理等,具体实现如下: 订单管理: 公司管理人员可以通过微信小程序查看和管理订单信息,包括订单状态、订单详情、订单历史等,方便及时跟踪订单进展并进行相应的处理。 库存管理: 系统提供了库存管理功能,包括库存查询、入库管理、出库管理等,帮助管理人员实时掌握公司的物料库存情况,做好库存的管理和调配。 员工管理: 公司管理人员可以通过微信小程序管理员工信息,包括员工档案、考勤记录、工资管理等,方便对员工进行管理和考核。 客户管理: 系统支持客户管理功能,包括客户信息录入、客户订单管理、客户反馈处理等,帮助公司管理人员建立和维护良好的客户关系。 系统采用了Spring Boot框架提供的后端逻辑实现,并通过微信小程序提供的接口与用户进行交互。同时,系统还利用了数据库技术存储公司的业务数据,确保了数据的安全性和可靠性。 基于Spring Boot框架的微信小程序机电公司管理信息系统为机电公司提供了一个集订单管理、库存管理、员工管理和客户管理于一体的综合管理平台,帮助公司提升管理效率和服务水平。
资源推荐
资源详情
资源评论
收起资源包目录
springboot框架基于微信小程序的机电公司管理信息系统(小程序)代码的实现.rar (1732个子文件)
main.css.bak 66KB
uni-fab.vue.bak 8KB
3-build.bat 16B
2-run.bat 14B
1-install.bat 12B
app.5abb1ea9.css 268KB
icon.css 71KB
main.css 68KB
chunk-vendors.6d894868.css 37KB
uniicons.css 9KB
global-restaurant.css 7KB
mescroll-uni.css 4KB
animation.css 3KB
style.css 2KB
theme.css 135B
微信小程序+springboot技术文档.docx 13KB
index.html 936B
index.html 588B
favicon.ico 4KB
favicon.ico 4KB
CommonController.java 27KB
LingjianOrderController.java 24KB
ShebeiOrderController.java 24KB
YonghuController.java 22KB
LingjianController.java 19KB
ShebeiController.java 18KB
QingjiaController.java 16KB
KehuController.java 16KB
KaoqinController.java 13KB
LingjianOrderView.java 12KB
ShebeiOrderView.java 12KB
GonggaoController.java 12KB
DictionaryController.java 12KB
ClazzDiff.java 9KB
LingjianEntity.java 8KB
ShebeiEntity.java 8KB
QingjiaEntity.java 7KB
YonghuEntity.java 7KB
LingjianOrderEntity.java 6KB
ShebeiOrderEntity.java 6KB
KehuEntity.java 6KB
LingjianVO.java 6KB
UsersController.java 6KB
ShebeiVO.java 6KB
MPUtil.java 5KB
LingjianModel.java 5KB
DictionaryServiceImpl.java 5KB
ShebeiModel.java 5KB
DictionaryEntity.java 5KB
KaoqinEntity.java 5KB
GonggaoEntity.java 5KB
QingjiaVO.java 5KB
YonghuVO.java 5KB
LingjianOrderVO.java 5KB
ShebeiOrderVO.java 5KB
QingjiaModel.java 4KB
KehuVO.java 4KB
YonghuModel.java 4KB
LingjianOrderModel.java 4KB
QingjiaView.java 4KB
ShebeiOrderModel.java 4KB
KaoqinView.java 4KB
KehuModel.java 4KB
BaiduUtil.java 4KB
FileController.java 4KB
PoiUtil.java 4KB
GonggaoVO.java 3KB
DictionaryVO.java 3KB
KaoqinVO.java 3KB
AuthorizationInterceptor.java 3KB
GonggaoModel.java 3KB
KaoqinModel.java 3KB
DictionaryModel.java 3KB
ConfigController.java 3KB
Query.java 3KB
TokenServiceImpl.java 2KB
DictionaryServletContextListener.java 2KB
CommonServiceImpl.java 2KB
TokenEntity.java 2KB
PageUtils.java 2KB
LingjianView.java 2KB
ShebeiView.java 2KB
GonggaoView.java 2KB
CommonUtil.java 2KB
YonghuView.java 2KB
InterceptorConfig.java 2KB
KehuView.java 2KB
LingjianOrderServiceImpl.java 1KB
ShebeiOrderServiceImpl.java 1KB
LingjianServiceImpl.java 1KB
UsersServiceImpl.java 1KB
GonggaoServiceImpl.java 1KB
QingjiaServiceImpl.java 1KB
ShebeiServiceImpl.java 1KB
YonghuServiceImpl.java 1KB
KaoqinServiceImpl.java 1KB
KehuServiceImpl.java 1KB
CommonService.java 1KB
UsersEntity.java 1KB
DictionaryView.java 1KB
共 1732 条
- 1
- 2
- 3
- 4
- 5
- 6
- 18
资源评论
程序猿阿存
- 粉丝: 1238
- 资源: 1804
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于python开发的12306网站抢票系统+源码+开发文档+代码解析(毕业设计&课程设计&项目开发)
- 数据库课设:图书馆管理系统(Java+MySQL)
- 基于STM32的智能家居控制系统.pdsprj
- 基于python实现LDPC码的编码译码,以CCSDS上行LDPC短码为例+源码(毕业设计&课程设计&项目开发)
- 华为OD机考题目Java
- ML307R OpenCPU 定时器osTimerNew使用
- 基于C++开发的LDPC码编译码仿真(译码算法采用反向置信传播算法BP)+源码+开发文档(毕业设计&课程设计&项目开发)
- 量化数据分析和决策系统
- videojs播放rtmp流,测试代码,需要部署到服务器上(包括但不限于tomcat,iis),路径为testtes2
- 基于原生servlet 和 JDBC实现的设备维修管理系统
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功