微信小程序的超市购物系统代码源码 微信小程序的超市购物系统代码代码（高分毕设项目源码）

# 介绍 `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