# 介绍
`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框架的微信小程序小区物业新冠疫情物资管理平台为小区居民提供了便捷、安全的疫情物资管理服务,帮助小区居民应对疫情挑战,保障居民的生活安全。
资源推荐
资源详情
资源评论
收起资源包目录
springboot框架基于微信小程序的小区物业新冠疫情物资管理平台小程序的实现.rar (1457个子文件)
main.css.bak 66KB
uni-fab.vue.bak 8KB
3-build.bat 16B
2-run.bat 14B
1-install.bat 12B
app.2aa8b6af.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
微信小程序+springboot技术文档.docx 13KB
index.html 948B
index.html 600B
favicon.ico 4KB
favicon.ico 4KB
CommonController.java 27KB
YonghuController.java 21KB
WuziChuruInoutController.java 20KB
WuziController.java 17KB
WuziJuanzengController.java 17KB
WuziYuyueController.java 16KB
ForumController.java 16KB
WuziChuruInoutListController.java 15KB
WuziCollectionController.java 14KB
WuziLiuyanController.java 13KB
DictionaryController.java 12KB
NewsController.java 11KB
ClazzDiff.java 9KB
WuziJuanzengView.java 7KB
WuziCollectionView.java 7KB
WuziYuyueView.java 7KB
WuziChuruInoutListView.java 7KB
WuziLiuyanView.java 7KB
ForumEntity.java 7KB
YonghuEntity.java 6KB
WuziEntity.java 6KB
WuziJuanzengEntity.java 6KB
WuziYuyueEntity.java 6KB
UsersController.java 6KB
ForumView.java 5KB
WuziChuruInoutEntity.java 5KB
MPUtil.java 5KB
DictionaryServiceImpl.java 5KB
DictionaryEntity.java 5KB
ForumVO.java 5KB
NewsEntity.java 5KB
YonghuVO.java 5KB
WuziVO.java 5KB
WuziChuruInoutListEntity.java 4KB
ForumModel.java 4KB
WuziCollectionEntity.java 4KB
WuziJuanzengVO.java 4KB
WuziLiuyanEntity.java 4KB
WuziYuyueVO.java 4KB
YonghuModel.java 4KB
WuziModel.java 4KB
WuziJuanzengModel.java 4KB
WuziYuyueModel.java 4KB
BaiduUtil.java 4KB
FileController.java 4KB
WuziChuruInoutVO.java 4KB
PoiUtil.java 4KB
DictionaryVO.java 3KB
AuthorizationInterceptor.java 3KB
WuziChuruInoutModel.java 3KB
NewsVO.java 3KB
DictionaryModel.java 3KB
WuziChuruInoutListVO.java 3KB
NewsModel.java 3KB
ConfigController.java 3KB
WuziCollectionVO.java 3KB
WuziLiuyanVO.java 3KB
WuziChuruInoutListModel.java 3KB
WuziCollectionModel.java 3KB
WuziLiuyanModel.java 3KB
Query.java 3KB
TokenServiceImpl.java 2KB
DictionaryServletContextListener.java 2KB
CommonServiceImpl.java 2KB
TokenEntity.java 2KB
PageUtils.java 2KB
WuziChuruInoutView.java 2KB
CommonUtil.java 2KB
NewsView.java 2KB
WuziView.java 2KB
YonghuView.java 2KB
InterceptorConfig.java 2KB
WuziChuruInoutListServiceImpl.java 1KB
WuziCollectionServiceImpl.java 1KB
WuziChuruInoutServiceImpl.java 1KB
WuziJuanzengServiceImpl.java 1KB
WuziLiuyanServiceImpl.java 1KB
WuziYuyueServiceImpl.java 1KB
UsersServiceImpl.java 1KB
YonghuServiceImpl.java 1KB
共 1457 条
- 1
- 2
- 3
- 4
- 5
- 6
- 15
资源评论
程序猿阿存
- 粉丝: 1240
- 资源: 1804
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功