基于ruoyi-plus实现AI聊天和AI绘画功能-小程序资源-CSDN文库

共1153个文件

js：509个

vue：238个

md：138个

人工智能

71 浏览量 2024-08-03 16:38:12 上传评论收藏 3.87MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

基于ruoyi-plus实现AI聊天和AI绘画功能-小程序（1153个子文件）

uni-fab.vue.bak 8KB

icon.css 69KB

color-ui.css 60KB

uniicons.css 8KB

index.css 4KB

index.css 3KB

news.css 3KB

my.css 1KB

set.css 634B

.gitignore 23B

index.html 672B

index.js 274KB

index.js 151KB

qrcode.js 56KB

parser.js 39KB

async-validator.js 38KB

RenderingContext.js 36KB

parser.js 35KB

uqrcode.js 35KB

marked.min.js 35KB

noNetwork.js 28KB

pay.js 27KB

calendar.js 26KB

icons.js 26KB

calendar.js 24KB

index.js 21KB

index.obj.js 19KB

RenderingContext.js 17KB

prism.min.js 15KB

clipboard.min.js 13KB

uni-data-picker.js 13KB

nvue - backup.js 12KB

validate.js 12KB

dayjs.js 11KB

index.js 11KB

index.js 10KB

validator.js 10KB

util.js 10KB

permission.js 9KB

GLenum.js 8KB

util.js 8KB

clone.js 8KB

utils.js 8KB

common.js 7KB

bridge-weex.js 7KB

icons.js 7KB

password.js 7KB

uni-pay-co.param.js 7KB

nvue.js 7KB

mixin.js 7KB

alipayBase.js 7KB

render.js 7KB

style.js 7KB

uni-cloud-cache.js 7KB

bindingx.js 6KB

index.obj.js 6KB

transition.js 6KB

config.js 6KB

clientdb.js 6KB

weixin.js 6KB

utils.js 6KB

test.js 6KB

uni-image-menu.js 6KB

Request.js 6KB

props.js 6KB

props.js 5KB

mpother.js 5KB

index.js 5KB

weixin-server.js 5KB

nvue - ╕▒▒╛.js 5KB

nvue.js 5KB

uni-image-menu.js 5KB

props.js 5KB

fission.js 5KB

utils.js 5KB

index.js 5KB

props.js 5KB

choose-and-upload-file.js 4KB

route.js 4KB

GLmethod.js 4KB

ad.js 4KB

colorGradient.js 4KB

version_add_detail_mixin.js 4KB

store.js 4KB

props.js 4KB

utils.js 4KB

mpalipay.js 4KB

value.js 4KB

js_sdk.js 4KB

mpother.js 4KB

date-format.js 4KB

digit.js 4KB

qq.js 4KB

共 1153 条

# 介绍 `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/LOcZtMezOHPONE25D22ZXfr7KWeAdeXiSw9ZO9nYte91iuPQjEgj6DwzJMInBLBNDXczA07p1hAeCQh52sZe7lH5EDn99geDgbYa9ToOlgayGURsU8rCbvdzN3voCUUdYmH9gJRPrMphx9mggNQPpYS/3sLcb2GvXCaITyEYFCEYHvRpIzUB62UsJZGO1QFbxwVgu2auB1B3IXvZ2I3sd

评论收藏

内容反馈