feat: 初始化

2025-07-07 16:05:18 +08:00
commit c169958240
986 changed files with 132574 additions and 0 deletions
--- a/uni_modules/lime-qrcode/changelog.md
+++ b/uni_modules/lime-qrcode/changelog.md
@ -0,0 +1,37 @@
+## 0.1.8（2024-08-05）
+- fix: 修复因shared升级导致微信小程序可能不生效的问题
+## 0.1.7（2024-05-15）
+- fix: 修复uvue因缺少依赖无法使用
+## 0.1.6（2024-05-09）
+- fix: 修复vue2因type问题导致无法使用
+## 0.1.5（2024-04-14）
+- fix: 修复缺少依赖
+## 0.1.4（2024-04-10）
+- chore: 更新文档
+## 0.1.3（2024-04-01）
+- chore: 兼容uniapp x ios(app-js)
+## 0.1.2（2023-12-14）
+- fix: uvue 引入 API 自定义包出错
+## 0.1.1（2023-12-11）
+- chore: uvue的二维码API独立，需要单独下载
+## 0.1.0（2023-12-07）
+- fix: 修复因utssdk目录导致无法运行
+## 0.0.9（2023-12-06）
+- feat: 支持uvue
+## 0.0.8（2023-12-06）
+- feat: 支持uvue
+## 0.0.7（2023-12-06）
+- feat: 支持uvue
+## 0.0.6（2023-12-06）
+- feat: 支持uvue
+## 0.0.5（2023-07-30）
+- fix: 修复再次生成前没有清空，导致图形叠加
+## 0.0.4（2023-07-27）
+- fix: 修复相同尺寸无法再次生成
+## 0.0.3（2023-06-09）
+- feat: 支持通过`@vue/composition-api`在`vue2`上使用
+- chore: 更新文档
+## 0.0.2（2023-06-08）
+- chore: 更新文档
+## 0.0.1（2023-06-08）
+- 首次
--- a/uni_modules/lime-qrcode/components/l-qrcode/l-qrcode.uvue
+++ b/uni_modules/lime-qrcode/components/l-qrcode/l-qrcode.uvue
@ -0,0 +1,235 @@
+<template>
+	<!-- #ifdef MP -->
+	<canvas :style="styles" type="2d" :canvas-id="canvasId" :id="canvasId"></canvas>
+	<!-- #endif  -->
+	<!-- #ifdef APP -->
+	<view class="l-qrcode" ref="drawableRef" :style="[styles]">
+		<image class="l-qrcode__icon" v-if="icon" :src="icon" :style="[iconStyle]"></image>
+	</view>
+	<!-- #endif  -->
+	<!-- #ifdef WEB -->
+	<view class="l-qrcode" ref="drawableRef" :style="[styles]">
+		
+	</view>
+	<!-- #endif  -->
+</template>
+<script lang="uts" setup>
+	import { type PropType, nextTick } from 'vue'
+	// #ifndef APP
+	import { QRCodeCanvas } from './qrcode.js';
+	import { QRCodePropsTypes , ImageSettings } from './type'
+	// #endif
+	// #ifdef APP
+	import { QRCodeCanvas, QRCodePropsTypes , ImageSettings } from '@/uni_modules/lime-qrcodegen'
+	// #endif
+	// import { addUnit } from '@/uni_modules/lime-shared/addUnit'
+	// import { unitConvert } from '@/uni_modules/lime-shared/unitConvert'
+	// import { toBoolean } from '@/uni_modules/lime-shared/toBoolean'
+	import { addUnit, unitConvert } from './utils'
+	import { LQrcodeFailCallback, LQrcodeCompleteCallback, LQrcodeSuccessCallback} from './type'
+	
+	const name = 'l-qrcode'
+	const props = defineProps({
+		value: {
+			type: String
+		},
+		icon: {
+			type: String
+		},
+		// #ifdef APP-ANDROID
+		size: {
+			type: Object,
+			default: 160
+		},
+		iconSize: {
+			type: Object,
+			default: 40
+		},
+		// #endif
+		// #ifndef APP-ANDROID
+		size: {
+			type: [Number, String],
+			default: 160
+		},
+		iconSize: {
+			type: [Number, String],
+			default: 40
+		},
+		// #endif
+		marginSize: {
+			type: Number,
+			default: 0
+		},
+		color: {
+			type: String,
+			default: '#000'
+		},
+		bgColor: {
+			type: String,
+			default: 'transparent'
+		},
+		bordered: {
+			type: Boolean,
+			default: true
+		},
+		errorLevel: {
+			type: String as PropType<'L' | 'M' | 'Q' | 'H'>,
+			default: 'M' // 'L' | 'M' | 'Q' | 'H'
+		},
+		useCanvasToTempFilePath: {
+			type: Boolean,
+			default: false
+		}
+		// status: {
+		// 	type: String as PropType<'active'|'expired'|'loading'>,
+		// 	default: 'active' // active | expired | loading
+		// }
+	})
+	const emits = defineEmits(['success'])
+	const context = getCurrentInstance();
+	const canvasId = `l-qrcode${context!.uid}` 
+	const styles = computed<Map<string, any>>(():Map<string, any>=>{
+		const style = new Map<string, any>()
+		const size = addUnit(props.size);
+		if(size!=null){
+			style.set('width', size)
+			style.set('height', size)
+		}
+		style.set('background', props.bgColor)
+		return style
+	})
+	// #ifdef APP
+	const iconStyle = computed<Map<string, any>>(():Map<string, any>=>{
+		const style = new Map<string, any>()
+		const size = addUnit(props.iconSize);
+		if(size!=null){
+			style.set('width', size)
+			style.set('height', size)
+		}
+		return style
+	})
+	// #endif
+	const drawableRef = ref<UniElement|null>(null);
+	// #ifdef WEB
+	let canvas:HTMLCanvasElement|null = null
+	// #endif
+	let qrcode:QRCodeCanvas|null = null
+	
+	const canvasToTempFilePath = (options: UTSJSONObject)=>{
+		
+		const format =   options.getString('format') ?? 'png';
+		const fail =     options.get('fail') as LQrcodeFailCallback | null;
+		const complete = options.get('complete') as LQrcodeCompleteCallback | null;
+		const success =  options.get('success') as LQrcodeSuccessCallback | null;
+		// #ifdef APP
+		const newOptions = {
+			format,
+			fail,
+			complete,
+			success,
+		} as TakeSnapshotOptions
+		drawableRef.value!.takeSnapshot(newOptions)
+		// #endif
+		// #ifdef WEB
+		success?.({
+			tempFilePath: canvas?.toDataURL('image/'+format)
+		})
+		// #endif
+		
+	}
+	const render = ()=>{
+		const param:QRCodePropsTypes = {
+			value: props.value,
+			size:  unitConvert(props.size),
+			fgColor: props.color,
+			level: ['L', 'M', 'Q', 'H'].includes(props.errorLevel) ? props.errorLevel : 'M',
+			marginSize: props.marginSize,
+			includeMargin: props.bordered,
+			imageSettings: null,
+		} as QRCodePropsTypes
+		
+		if(props.icon != null){
+		// if(toBoolean(props.iconSize) && toBoolean(props.icon)){
+			const size = unitConvert(props.iconSize)
+			param.imageSettings = {
+				src: props.icon,
+				width: size,
+				height: size,
+				excavate: true
+			} as ImageSettings
+		}
+		qrcode?.render(param)
+		
+		if(props.useCanvasToTempFilePath){
+			setTimeout(()=>{
+				canvasToTempFilePath({
+					success: (res: TakeSnapshotSuccess)=>{
+						emits('success', res.tempFilePath)
+					}
+				})
+			},100)
+		}
+	}
+	defineExpose({
+		canvasToTempFilePath
+	})
+	onMounted(()=>{
+		nextTick(()=>{
+			// #ifdef APP
+			const ctx = drawableRef.value!.getDrawableContext();
+			qrcode = new QRCodeCanvas(ctx!)
+			// #endif
+			// #ifdef WEB
+			canvas = document.createElement('canvas')
+			canvas.style.width = '100%'
+			canvas.style.height = '100%'
+			drawableRef.value!.appendChild(canvas)
+			qrcode = new QRCodeCanvas(canvas, {
+				pixelRatio: uni.getSystemInfoSync().pixelRatio,
+				createImage: () => {
+					const image = new Image();
+					image.crossOrigin = 'anonymous'; 
+					return image;
+				}
+			})
+			// #endif
+			
+			watchEffect(()=>{
+				render()
+			})
+		})
+		
+	})
+	onUnmounted(()=>{
+		// #ifdef WEB
+		canvas?.remove();
+		// #endif
+		qrcode = null;
+	})
+</script>
+<style lang="scss">
+	.l-qrcode {
+		position: relative;
+		background-color: aqua;
+		justify-content: center;
+		align-items: center;
+
+		&-mask {
+			position: absolute;
+			// inset: 0;
+			// inset-block-start: 0;
+			// inset-inline-start: 0;
+			z-index: 10;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			// width: 100%;
+			// height: 100%;
+			color: rgba(0, 0, 0, 0.88);
+			line-height: 1.5714285714285714;
+			background: rgba(255, 255, 255, 0.96);
+			text-align: center;
+		}
+	}
+</style>
--- a/uni_modules/lime-qrcode/components/l-qrcode/l-qrcode.vue
+++ b/uni_modules/lime-qrcode/components/l-qrcode/l-qrcode.vue
@ -0,0 +1,223 @@
+<template>
+	<view class="l-qrcode" :style="[styles]">
+		<!-- #ifndef APP-NVUE -->
+		<canvas :style="styles" type="2d" :canvas-id="canvasId" :id="canvasId"></canvas>
+		<!-- #endif  -->
+		<!-- #ifdef APP-NVUE  -->
+		<web-view 
+		ref="qrcodeRef"
+		@pagefinish="onFinished" 
+		@error="onError" 
+		@onPostMessage="onMessage"
+		:style="styles" src="/uni_modules/lime-qrcode/hybrid/html/index.html?v=1"></web-view>
+		<!-- #endif  -->
+		<!-- <view class="l-qrcode-mask" v-if="['loading', 'expired'].includes(props.status)">
+			<l-loading v-if="props.status == 'loading'"></l-loading>
+			<view class="l-qrcode-expired" v-if="props.status == 'expired'">
+				<slot></slot>
+			</view>
+		</view> -->
+	</view>
+</template>
+<script lang="ts">
+	// @ts-nocheck
+	import { computed, defineComponent, getCurrentInstance, watch, onUnmounted, onMounted } from '@/uni_modules/lime-shared/vue';
+	import QRCodeProps from './props'
+	// #ifndef APP-NVUE
+	import { getCanvas, isCanvas2d } from './useCanvas'
+	import { QRCodeCanvas } from './qrcode.js';
+	// #endif
+	import { addUnit } from '@/uni_modules/lime-shared/addUnit'
+	import { createImage } from '@/uni_modules/lime-shared/createImage'
+	import { unitConvert } from '@/uni_modules/lime-shared/unitConvert'
+	import { isBase64 } from '@/uni_modules/lime-shared/isBase64'
+	import { pathToBase64 } from '@/uni_modules/lime-shared/pathToBase64'
+	import { debounce } from '@/uni_modules/lime-shared/debounce'
+	const name = 'l-qrcode'
+	export default defineComponent({
+		name,
+		props: QRCodeProps,
+		emits: ['success'],
+		setup(props, {emit}) {
+			const context = getCurrentInstance();
+			const canvasId = `l-qrcode${context.uid}` 
+			const styles = computed(() => `width: ${addUnit(props.size)}; height: ${addUnit(props.size)};`)
+			let qrcode = null
+			let canvas = null
+			const qrCodeProps = computed(() => {
+				const { value, icon, size, color, bgColor, bordered, iconSize, errorLevel, marginSize } = props
+				const imageSettings = {
+					src: icon,
+					x: undefined,
+					y: undefined,
+					height: unitConvert(iconSize),
+					width: unitConvert(iconSize),
+					excavate: true,
+				}
+				return {
+					value,
+					size: unitConvert(size),
+					level: errorLevel,
+					bgColor,
+					fgColor: color,
+					imageSettings: icon ? imageSettings : undefined,
+					includeMargin: bordered,
+					marginSize: marginSize ?? 0
+				}
+
+			})
+			
+			// #ifdef APP-NVUE
+			const stacks = new Map()
+			// #endif
+			const canvasToTempFilePath = debounce((args: UniNamespace.CanvasToTempFilePathRes) => {
+				if(!canvas) return
+				// #ifndef APP-NVUE
+				const copyArgs = Object.assign({
+					canvasId,
+					canvas: null
+				}, args)
+				
+				if (isCanvas2d) {
+					copyArgs.canvas = canvas
+				}
+				if ('toTempFilePath' in canvas) {
+					canvas.toTempFilePath(copyArgs)
+				} else {
+					uni.canvasToTempFilePath(copyArgs, context);
+				}
+				// #endif
+				// #ifdef APP-NVUE
+				if(!stacks.size) {
+					const flie = 'file-' + Math.random();
+					const stack = {args, time: +new Date()}
+					stacks.set(`${flie}`, stack)
+					canvas.toDataURL(flie)
+					setTimeout(() => {
+						const stack = stacks.get(flie)
+						if(stack && 'fail' in stack.args) {
+							stack.args.fail({
+								error: '超时'
+							})
+							stacks.delete(flie)
+						}
+					},5000)
+				} 
+				// #endif
+			})
+			const useCanvasToTempFilePath = () => {
+				if(props.useCanvasToTempFilePath) {
+					canvasToTempFilePath({
+						success(res: UniNamespace.CanvasToTempFilePathRes) {
+							emit('success', res.tempFilePath)
+						}
+					})
+				}
+			}
+			// #ifdef APP-NVUE
+			const onFinished = () => {
+				const { pixelRatio } = uni.getSystemInfoSync()
+				canvas = {
+					toDataURL(flie: string) {
+						const ref: any = context.refs['qrcodeRef'];
+						if(ref) {
+							ref?.evalJS(`toDataURL('${flie}')`)
+						}
+					}
+				};
+				qrcode = {
+					async render(props: any) {
+						const ref: any = context.refs['qrcodeRef'];
+						const { src } = props.imageSettings || { };
+						if(!ref) return
+						if(src && !isBase64(src) && !/^http/.test(src) && /^\/static/.test(src)) {
+							props.imageSettings.src = await pathToBase64(src)
+						}
+						const _props = JSON.stringify(Object.assign({}, props, {pixelRatio}));
+						ref?.evalJS(`render(${_props})`);
+					}
+				}
+				qrcode.render(qrCodeProps.value)
+				useCanvasToTempFilePath()
+			}
+			const onError = () => {
+				console.warn('lime-qrcode 加载失败')
+			}
+			const onMessage = (e: any) => {
+				const {detail:{data: [res]}} = e
+				if(res.event == 'toDataURL') {
+					const {file, image, msg} = res.data;
+					const stack = stacks.get(file)
+					if(stack && image && 'success' in stack.args) {
+						stack.args.success({tempFilePath: image})
+						stacks.delete(file)
+					} else if(stack && 'fails' in stack.args) {
+						stack.args.fail({error: msg})
+						stacks.delete(file)
+					}
+				} 
+			}
+			// #endif
+			const propsWatch = watch(props, () => {
+				if (qrcode) {
+					qrcode.render(qrCodeProps.value)
+					useCanvasToTempFilePath()
+				}
+			})
+			onMounted(() => {
+				// #ifndef APP-NVUE
+				getCanvas(canvasId, { context }).then(res => {
+					canvas = res
+					qrcode = new QRCodeCanvas(res, {
+						// #ifdef H5
+						path2D: false,
+						// #endif
+						pixelRatio: isCanvas2d ? uni.getSystemInfoSync().pixelRatio : 1,
+						createImage
+					})
+					qrcode.render(qrCodeProps.value)
+					useCanvasToTempFilePath()
+				})
+				// #endif
+			})
+			onUnmounted(() => {
+				propsWatch && propsWatch()
+			})
+			return {
+				canvasId,
+				styles,
+				props,
+				canvasToTempFilePath,
+				
+				// #ifdef APP-NVUE
+				onFinished,
+				onError,
+				onMessage
+				// #endif
+			}
+		}
+	})
+</script>
+<style lang="scss">
+	.l-qrcode {
+		position: relative;
+
+		&-mask {
+			position: absolute;
+			inset: 0;
+			// inset-block-start: 0;
+			// inset-inline-start: 0;
+			z-index: 10;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			// width: 100%;
+			// height: 100%;
+			color: rgba(0, 0, 0, 0.88);
+			line-height: 1.5714285714285714;
+			background: rgba(255, 255, 255, 0.96);
+			text-align: center;
+		}
+	}
+</style>
--- a/uni_modules/lime-qrcode/components/l-qrcode/props.ts
+++ b/uni_modules/lime-qrcode/components/l-qrcode/props.ts
@ -0,0 +1,36 @@
+// @ts-nocheck
+// import type { PropType } from './vue'
+export default {
+	value: String,
+	icon: String,
+	size: {
+		type: [Number, String],
+		default: 160
+	},
+	iconSize: {
+		type: [Number, String],
+		default: 40
+	},
+	marginSize: Number,
+	color: {
+		type: String,
+		default: '#000'
+	},
+	bgColor: {
+		type: String,
+		default: 'transparent'
+	},
+	bordered: {
+		type: Boolean,
+		default: true
+	},
+	errorLevel: {
+		type: String as PropType<'L'|'M'|'Q'|'H'>,
+		default: 'M' // 'L' | 'M' | 'Q' | 'H'
+	},
+	useCanvasToTempFilePath: Boolean
+	// status: {
+	// 	type: String as PropType<'active'|'expired'|'loading'>,
+	// 	default: 'active' // active | expired | loading
+	// }
+}
--- a/uni_modules/lime-qrcode/components/l-qrcode/qrcode.js
+++ b/uni_modules/lime-qrcode/components/l-qrcode/qrcode.js
--- a/uni_modules/lime-qrcode/components/l-qrcode/type.ts
+++ b/uni_modules/lime-qrcode/components/l-qrcode/type.ts
@ -0,0 +1,48 @@
+// @ts-nocheck
+export type ImageSettings = {
+	width: number
+	height: number
+	x?: number
+	y?: number
+	excavate: boolean
+}
+export type QRCodePropsTypes = {
+	value?: string
+	size?: number
+	fgColor?: string
+	level?: string
+	marginSize: number
+	includeMargin: boolean
+	imageSettings?: ImageSettings
+}
+
+export type QRCodeCallback = (cells : boolean[][]) => void
+
+export type Excavation = {
+	x: number
+	y: number
+	h: number
+	w: number
+}
+
+
+
+
+
+/**
+ * 成功回调函数定义
+ */
+export type TakeSnapshotSuccessCallback = (res: TakeSnapshotSuccess) => void
+/**
+ * 失败回调函数定义
+ */
+export type TakeSnapshotFailCallback = (res: TakeSnapshotFail) => void
+/**
+ * 完成回调函数定义
+ */
+export type TakeSnapshotCompleteCallback = (res: any) => void
+
+
+export type LQrcodeFailCallback = TakeSnapshotFailCallback
+export type LQrcodeCompleteCallback = TakeSnapshotCompleteCallback
+export type LQrcodeSuccessCallback  = TakeSnapshotSuccessCallback
--- a/uni_modules/lime-qrcode/components/l-qrcode/useCanvas.ts
+++ b/uni_modules/lime-qrcode/components/l-qrcode/useCanvas.ts
@ -0,0 +1,78 @@
+
+// @ts-nocheck
+import type { ComponentInternalInstance } from '@/uni_modules/lime-shared/vue'
+import { getRect } from '@/uni_modules/lime-shared/getRect'
+import { canIUseCanvas2d } from '@/uni_modules/lime-shared/canIUseCanvas2d'
+export const isCanvas2d = canIUseCanvas2d()
+
+export async function getCanvas(canvasId: string, options: {context: ComponentInternalInstance}) {
+	let { context } = options
+	// #ifdef MP || VUE2
+	if (context.proxy) context = context.proxy
+	// #endif
+	return getRect('#' + canvasId, context, isCanvas2d).then(res => {
+		if(res.node){
+			return res.node
+		} else {
+			const ctx = uni.createCanvasContext(canvasId, context)
+			return {
+				getContext(type: string) {
+					if(type == '2d') {
+						return ctx
+					}
+				},
+				width: res.width,
+				height: res.height,
+			}
+			// #ifdef H5
+			// canvas.value = context.proxy.$el.querySelector('#'+ canvasId)
+			// #endif
+		}
+	})
+}
+
+// #ifndef H5 || APP-NVUE
+class Image {
+	currentSrc: string | null = null
+	naturalHeight: number = 0
+	naturalWidth: number = 0
+	width: number = 0
+	height: number = 0
+	tagName: string = 'IMG'
+	path: any = ''
+	crossOrigin: any = ''
+	referrerPolicy: any = ''
+	onload: () => void
+	onerror: () => void
+	constructor() {}
+	set src(src) {
+		this.currentSrc = src
+		uni.getImageInfo({
+			src,
+			success: (res) => {
+				this.path = res.path
+				this.naturalWidth = this.width = res.width
+				this.naturalHeight = this.height = res.height
+				this.onload()
+			},
+			fail: () => {
+				this.onerror()
+			}
+		})
+	}
+	get src() {
+		return this.currentSrc
+	}
+}
+// #endif
+
+export function createImage(canvas: WechatMiniprogram.Canvas) {
+	if(canvas && canvas.createImage) {
+		return canvas.createImage()
+	} else if(typeof window != 'undefined' && window.Image) {
+		return new window.Image()
+	}
+	// #ifndef H5 || APP-NVUE
+	return new Image()
+	// #endif
+}
--- a/uni_modules/lime-qrcode/components/l-qrcode/utils.uts
+++ b/uni_modules/lime-qrcode/components/l-qrcode/utils.uts
@ -0,0 +1,35 @@
+export function addUnit(value: any|null):string{
+	if(value == null){
+		return ''
+	}
+	value = `${value}` 
+	return /^(-)?\d+(\\.\d+)?$/.test(value) ?  `${value}px` : value
+}
+
+export function unitConvert(value: any|null): number{
+	if(typeof value == 'number'){
+		return value as number
+	}
+	if(typeof value == 'string'){
+		value = `${value}` 
+		if(/^(-)?\d+(\\.\d+)?$/.test(value)){
+			return parseFloat(value);
+		}
+		
+		const reg = /^-?([0-9]+)?([.]{1}[0-9]+){0,1}(em|rpx|px|%)$/g;
+		const results = reg.exec(value);
+		if (results == null) {
+			return 0;
+		}
+		const unit = results[3];
+		const v = parseFloat(value);
+		if (unit == 'rpx') {
+			const { windowWidth } = uni.getWindowInfo()
+			return windowWidth / 750 * v;
+		}
+		if (unit == 'px') {
+			return v;
+		}
+	}
+	return 0;
+}
--- a/uni_modules/lime-qrcode/components/lime-qrcode/lime-qrcode.uvue
+++ b/uni_modules/lime-qrcode/components/lime-qrcode/lime-qrcode.uvue
@ -0,0 +1,140 @@
+<template>
+	<view class="demo-block">
+		<text class="demo-block__title-text ultra">QRCode</text>
+		<text class="demo-block__desc-text">能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置</text>	
+		<view class="demo-block__body">
+			<view class="demo-block card">
+				<text class="demo-block__title-text large">基础</text>
+				<view class="demo-block__body">
+					<l-qrcode value="https://limeui.qcoon.cn" size="300rpx"></l-qrcode>
+				</view>	
+			</view>	
+			
+			<view class="demo-block card">
+				<text class="demo-block__title-text large">icon</text>
+				<view class="demo-block__body">
+					<image v-if="image !=''" :src="image" style="width: 300rpx;" mode="widthFix"></image>
+					<view style="flex-direction: row; justify-content: space-between">
+						<l-qrcode ref="qrcodeRef" value="https://limeui.qcoon.cn" size="300rpx" icon="https://img10.360buyimg.com/img/jfs/t1/182127/16/37474/11761/64659c31F0cd84976/21f25b952f03a49a.jpg" iconSize="70rpx"></l-qrcode>
+						<l-qrcode :useCanvasToTempFilePath="true" @success="success" value="https://limeui.qcoon.cn" size="300rpx" icon="https://img10.360buyimg.com/img/jfs/t1/182127/16/37474/11761/64659c31F0cd84976/21f25b952f03a49a.jpg" iconSize="70rpx"></l-qrcode>
+					</view>
+					<button type="primary" style="margin-top: 20rpx;" @click="onClick">生成图片</button>
+				</view>	
+			</view>
+			
+			<view class="demo-block card">
+				<text class="demo-block__title-text large">颜色</text>
+				<view class="demo-block__body">
+					<view style="flex-direction: row; justify-content: space-between">
+						<l-qrcode value="https://limeui.qcoon.cn" size="300rpx" color="rgb(82,196,26)"></l-qrcode>
+						<l-qrcode value="https://limeui.qcoon.cn" size="300rpx" color="rgb(22,119,255)" bgColor="rgb(245,245,245)"></l-qrcode>
+					</view>	
+				</view>	
+			</view>
+			
+			<view class="demo-block card">
+				<text class="demo-block__title-text large">纠错比例</text>
+				<view class="demo-block__body">
+					<l-qrcode value="img10.360buyimg.com/img/jfs/t1/182127/16/37474/11761/64659c31F0cd84976/21f25b952f03a49a.jpg" size="300rpx" :errorLevel="levels[index]"></l-qrcode>
+					<button type="primary" style="margin-top: 20rpx;" @click="onToggle">切换纠错等级：{{levels[index]}}</button>
+				</view>	
+			</view>
+			
+			<view class="demo-block card">
+				<text class="demo-block__title-text large">动态</text>
+				<view class="demo-block__body">
+					<l-qrcode :value="text" size="300rpx" :marginSize="1" bgColor="white"></l-qrcode>
+					<button type="primary" style="margin-top: 20rpx;"  @click="update">更新</button>
+				</view>	
+			</view>
+			
+		</view>	
+	</view>
+	
+</template>
+<script>
+	// import {ComponentPublicInstance} from 'vue'
+	export default {
+		name: 'lime-qrcode',
+		data() {
+			return {
+				text: 'qcoon.com.cn',
+				image: '',
+				index: 0,
+				levels: ['L', 'M', 'Q', 'H']
+			}
+		},
+		methods:{ 
+			success(src: string) {
+				console.log(`src`, src)
+			},
+			update() {
+				this.text =  `qcoon.cn?v=${Math.random()}`
+			},
+			onToggle() {
+				this.index++
+				this.index = this.index % this.levels.length
+			},
+			onClick() {
+				const el:LQrcodeComponentPublicInstance = this.$refs['qrcodeRef'] as LQrcodeComponentPublicInstance 
+				el.canvasToTempFilePath({
+					success:(res: TakeSnapshotSuccess)=>{
+						this.image = res.tempFilePath
+					}
+				})
+			}
+		},
+		mounted() {
+			
+		}
+	}
+</script>
+<style lang="scss">
+	
+	.demo-block {
+		margin: 32px 10px 0;
+		overflow: visible;
+		&.card{
+			background-color: white;
+			padding: 30rpx;
+			margin-bottom: 20rpx;
+		}
+		&__title {
+			margin: 0;
+			margin-top: 8px;
+			&-text {
+				color: rgba(0, 0, 0, 0.6);
+				font-weight: 400;
+				font-size: 14px;
+				line-height: 16px;
+				
+				&.large {
+					color: rgba(0, 0, 0, 0.9);
+					font-size: 18px;
+					font-weight: 700;
+					line-height: 26px;
+				}
+				&.ultra {
+					color: rgba(0, 0, 0, 0.9);
+					font-size: 24px;
+					font-weight: 700;
+					line-height: 32px;
+				}
+			}
+		}
+		&__desc-text {
+			color: rgba(0, 0, 0, 0.6);
+			margin: 8px 16px 0 0;
+			font-size: 14px;
+			line-height: 22px;
+		}
+		&__body {
+			margin: 16px 0;
+			overflow: visible;
+			.demo-block {
+				// margin-top: 0px;
+				margin: 0;
+			}
+		}
+	}
+</style>
--- a/uni_modules/lime-qrcode/components/lime-qrcode/lime-qrcode.vue
+++ b/uni_modules/lime-qrcode/components/lime-qrcode/lime-qrcode.vue
@ -0,0 +1,79 @@
+<template>
+	<demo-block title="QRCode" type="ultra">
+		<demo-block title="基础">
+			<l-qrcode value="https://limeui.qcoon.cn" size="300rpx"></l-qrcode>
+		</demo-block>
+		 <demo-block title="icon">
+			<view style="display: flex; gap: 10px">
+				<image v-if="image" :src="image" style="width: 300rpx;" mode="widthFix"></image>
+				<l-qrcode ref="qrcodeRef" value="https://limeui.qcoon.cn" size="300rpx" icon="https://img10.360buyimg.com/img/jfs/t1/182127/16/37474/11761/64659c31F0cd84976/21f25b952f03a49a.jpg" iconSize="70rpx"></l-qrcode>
+				<l-qrcode useCanvasToTempFilePath @success="success" value="https://limeui.qcoon.cn" size="300rpx" icon="https://img10.360buyimg.com/img/jfs/t1/182127/16/37474/11761/64659c31F0cd84976/21f25b952f03a49a.jpg" iconSize="70rpx"></l-qrcode>
+			</view>
+			<button @click="onClick">生成图片</button>
+		</demo-block>
+		<demo-block title="颜色">
+			<view style="display: flex; gap: 10px">
+				<l-qrcode value="https://limeui.qcoon.cn" size="300rpx" color="rgb(82,196,26)"></l-qrcode>
+				<l-qrcode value="https://limeui.qcoon.cn" size="300rpx" color="rgb(22,119,255)" bgColor="rgb(245,245,245)"></l-qrcode>
+			</view>	
+		</demo-block>
+		<demo-block title="纠错比例">
+			<l-qrcode value="img10.360buyimg.com/img/jfs/t1/182127/16/37474/11761/64659c31F0cd84976/21f25b952f03a49a.jpg" size="300rpx" :errorLevel="levels[index]"></l-qrcode>
+			<button @click="onToggle">切换纠错等级：{{levels[index]}}</button>
+		</demo-block>
+		<demo-block title="动态">
+			<l-qrcode :value="text" size="300rpx" :marginSize="1" bgColor="white"></l-qrcode>
+			<button @click="update">更新</button>
+		</demo-block>
+	</demo-block>
+</template>
+<script>
+	import {ref, defineComponent} from '@/uni_modules/lime-shared/vue'
+	export default defineComponent({
+		setup() {
+			const qrcodeRef = ref(null)
+			const image = ref(null)
+			const text = ref('qcoon.com.cn')
+			const levels = ['L', 'M', 'Q', 'H']
+			let index = ref(0)
+			const onToggle = () => {
+				index.value++
+				index.value = index.value % levels.length
+			}
+			const onClick = () => {
+				if(qrcodeRef.value) {
+					qrcodeRef.value.canvasToTempFilePath({
+						success(res) {
+							image.value = res.tempFilePath
+							console.log('success:::', res)
+						},
+						fail(err) {
+							console.log('err:::', err)
+						}
+					})
+				}
+			}
+			const success = (res) => {
+				console.log('res', res)
+			}
+			
+			const update = () =>{
+				text.value =  `qcoon.cn?v=${Math.random()}`
+			}
+			
+			return {
+				levels,
+				index,
+				image,
+				text,
+				qrcodeRef,
+				onClick,
+				update,
+				success,
+				onToggle,
+			}
+		}
+	})
+</script>
+<style>
+</style>
--- a/uni_modules/lime-qrcode/hybrid/html/index.html
+++ b/uni_modules/lime-qrcode/hybrid/html/index.html
@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>lime-qrcode</title>
+	<style>
+		html,body,canvas {
+			margin: 0;
+			padding: 0;
+			width: 100%;
+			height: 100%;
+			pointer-events: none;
+			/* background-color: rgba(255,0,0,0.1) */
+		}
+	</style>
+</head>
+<body>
+	<canvas id="lime-qrcode"></canvas>
+	<script type="text/javascript" src="./uni.webview.1.5.3.js"></script>
+	<script type="text/javascript" src="./qrcode.min.js"></script>
+	<script>
+		var canvas = document.querySelector('#lime-qrcode')
+		var pixelRatio = window.devicePixelRatio || 1
+		function appendWatermark(image) {
+			emit('append', mark.toDataURL())
+		}
+		
+		var qrcode = new lime.QRCodeCanvas(canvas, {
+			pixelRatio,
+		})
+		function render(props) {
+			if(props.pixelRatio) {
+				pixelRatio = props.pixelRatio
+			}
+			if(qrcode) {
+				qrcode.render(props)
+			} 
+		}
+		function toDataURL(file) {
+			if(qrcode && canvas) {
+				try{
+					const image = canvas.toDataURL()
+					emit('toDataURL', {
+						file,
+						image
+					})
+				}catch(e){
+					emit('toDataURL', {
+						file,
+						msg: e
+					})
+				}
+				
+			} 
+		}
+		function emit(event, data) {
+			postMessage({
+				event,
+				data
+			});
+		};
+		function postMessage(data) {
+			uni.postMessage({
+				data
+			});
+		};
+		// render({
+		// 	content: ['Lime UI'],
+		// 	// rotate: -22,
+		// 	// baseSize: 2,
+		// 	// fontGap: 3
+		// })
+	</script>
+</body>
+</html>
--- a/uni_modules/lime-qrcode/hybrid/html/qrcode.min.js
+++ b/uni_modules/lime-qrcode/hybrid/html/qrcode.min.js
--- a/uni_modules/lime-qrcode/hybrid/html/uni.webview.1.5.3.js
+++ b/uni_modules/lime-qrcode/hybrid/html/uni.webview.1.5.3.js
--- a/uni_modules/lime-qrcode/package.json
+++ b/uni_modules/lime-qrcode/package.json
@ -0,0 +1,91 @@
+{
+	"id": "lime-qrcode",
+	"displayName": "qrcode 二维码生成",
+	"version": "0.1.8",
+	"description": "一款全平台通用的二维码生成插件，支持uniapp/uniappx(web,ios,安卓)",
+	"keywords": [
+        "qrcode",
+        "qr",
+        "uvue",
+        "生成图片",
+        "二维码"
+    ],
+	"repository": "",
+    "engines": {
+	},
+	"dcloudext": {
+		"type": "component-vue",
+		"sale": {
+			"regular": {
+				"price": "0.00"
+			},
+			"sourcecode": {
+				"price": "0.00"
+			}
+		},
+		"contact": {
+			"qq": "305716444"
+		},
+		"declaration": {
+			"ads": "无",
+			"data": "无",
+			"permissions": "无"
+		},
+		"npmurl": ""
+	},
+	"uni_modules": {
+		"dependencies": [
+			"lime-shared"
+		],
+		"encrypt": [],
+		"platforms": {
+			"cloud": {
+				"tcb": "y",
+                "aliyun": "y",
+                "alipay": "n"
+			},
+			"client": {
+				"Vue": {
+					"vue2": "y",
+					"vue3": "y"
+				},
+				"App": {
+					"app-vue": "y",
+					"app-nvue": "y",
+					"app-uvue": "y",
+					"app-android": {
+						"minVersion": "19"
+                    }
+				},
+				"H5-mobile": {
+					"Safari": "y",
+					"Android Browser": "y",
+					"微信浏览器(Android)": "y",
+					"QQ浏览器(Android)": "y"
+				},
+				"H5-pc": {
+					"Chrome": "y",
+					"IE": "u",
+					"Edge": "u",
+					"Firefox": "u",
+					"Safari": "u"
+				},
+				"小程序": {
+					"微信": "y",
+					"阿里": "u",
+					"百度": "u",
+					"字节跳动": "u",
+					"QQ": "u",
+					"钉钉": "u",
+					"快手": "u",
+					"飞书": "u",
+					"京东": "u"
+				},
+				"快应用": {
+					"华为": "u",
+					"联盟": "u"
+				}
+			}
+		}
+	}
+}
--- a/uni_modules/lime-qrcode/readme.md
+++ b/uni_modules/lime-qrcode/readme.md
@ -0,0 +1,152 @@
+# lime-qrcode 二维码
+- 一款全平台通用的二维码生成插件，支持uniapp/uniappx(web,ios,安卓)
+- uvue 需要导入[lime-qrcodegen](https://ext.dcloud.net.cn/plugin?id=15838)
+
+## 使用
+- 导入插件后直接使用
+- uvue 需要导入**[lime-qrcodegen](https://ext.dcloud.net.cn/plugin?id=15838)**
+
+#### 基础使用
+
+```html
+<l-qrcode value="http://lime.qcoon.cn" />
+```
+
+
+#### ICON
+- 带 Icon 的二维码
+
+```html
+<l-qrcode value="https://limeui.qcoon.cn" size="300rpx" icon="/static/logo.png" iconSize="70rpx"></l-qrcode>
+```
+
+#### 颜色
+- 通过设置 `color` 自定义二维码颜色，通过设置 `bgColor` 自定义背景颜色。
+
+```html
+<l-qrcode value="https://limeui.qcoon.cn" size="300rpx" color="rgb(82,196,26)"></l-qrcode>
+<l-qrcode value="https://limeui.qcoon.cn" size="300rpx" color="rgb(22,119,255)" bgColor="rgb(245,245,245)"></l-qrcode>
+```
+
+#### 纠错比例
+- 通过设置 `errorLevel` 调整不同的容错等级。
+
+```html
+<l-qrcode value="img10.360buyimg.com/img/jfs/t1/182127/16/37474/11761/64659c31F0cd84976/21f25b952f03a49a.jpg" size="300rpx" errorLevel="H"></l-qrcode>
+```
+
+#### 生成图片
+- 1、通过调用插件的`canvasToTempFilePath`方法生成图片。
+
+```html
+<image v-if="image" :src="image" style="width: 300rpx;" mode="widthFix"></image>
+<l-qrcode ref="qrcodeRef" value="https://limeui.qcoon.cn" size="300rpx" icon="https://img10.360buyimg.com/img/jfs/t1/182127/16/37474/11761/64659c31F0cd84976/21f25b952f03a49a.jpg" iconSize="70rpx"></l-qrcode>
+<button @click="onClick">生成图片</button>
+```
+```js
+// vue3
+const qrcodeRef = ref(null)
+const onClick = () => {
+	if(!qrcodeRef.value) return
+	qrcodeRef.value.canvasToTempFilePath({
+		success(res) {
+			image.value = res.tempFilePath
+			console.log('success:::', res)
+		},
+		fail(err) {
+			console.log('err:::', err)
+		}
+	})
+}
+
+// vue2
+const el = this.$refs['qrcodeRef'] 
+el.canvasToTempFilePath({
+	success:(res)=>{
+		this.image = res.tempFilePath
+	},
+	fail(err) {
+		console.log('err:::', err)
+	}
+})
+
+// uvue
+const el:LQrcodeComponentPublicInstance = this.$refs['qrcodeRef'] as LQrcodeComponentPublicInstance 
+el.canvasToTempFilePath({
+	success:(res: TakeSnapshotSuccess)=>{
+		this.image = res.tempFilePath
+	},
+	fail(err: TakeSnapshotFail) {
+		console.log('err:::', err)
+	}
+})
+```
+
+- 2、通过设置`useCanvasToTempFilePath`在`success`事件里接收图片地址
+
+```html
+<image v-if="image" :src="image" style="width: 300rpx;" mode="widthFix"></image>
+<l-qrcode useCanvasToTempFilePath @success="success" value="https://limeui.qcoon.cn"></l-qrcode>
+```
+```js
+const image = ref(null)
+const success = (img) => {
+	image.value = img
+}
+```
+
+### 关于vue2的使用方式
+- 插件使用了`composition-api`, 如果你希望在vue2中使用请按官方的教程[vue-composition-api](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置
+- 关键代码是: 在main.js中 在vue2部分加上这一段即可
+
+```js
+// main.js vue2
+import Vue from 'vue'
+import VueCompositionAPI from '@vue/composition-api'
+Vue.use(VueCompositionAPI)
+```
+另外插件也用到了TS，vue2可能会遇过官方的TS版本过低的问题,找到HX目录下的`compile-typescript`目录
+```cmd
+// \HBuilderX\plugins\compile-typescript
+yarn add typescript -D
+- or - 
+npm install typescript -D
+```
+
+### 查看示例
+- 导入后直接使用这个标签查看演示效果
+
+```html
+// 代码位于 uni_modules/lime-qrcode/compoents/lime-qrcode
+<lime-qrcode />
+```
+
+### 插件标签
+- 默认 l-qrcode 为 component
+- 默认 lime-qrcode 为 demo
+
+
+
+## API
+
+### Props
+
+| 参数                       | 说明                                                         | 类型             | 默认值       |
+| --------------------------| ------------------------------------------------------------ | ---------------- | ------------ |
+| value                     | 扫描后的文本                                       			| <em>string</em>  | `-`        |
+| icon                      | 二维码中图片的地址                                              | <em>string</em>  | `-`        |
+| size                      | 二维码大小                                                      | <em>number，string</em>  | `160`     |
+| iconSize           		| 二维码中图片的大小                                                | <em>number，string</em>  | `40`      |
+| color           	        | 二维码颜色                                                        | <em>string</em>  | `-`      |
+| bgColor           	    | 二维码背景颜色          	                                      | <em>string</em>  | `-`  |
+| errorLevel             	| 二维码纠错等级       					                         | `'L' | 'M' | 'Q' | 'H' ` | `M`  |
+| marginSize             	| 边距码大小，默认为0码点      					                          | <em>number</em>  | `0`     |
+
+### 常见问题
+- icon 是网络地址时，H5和Nvue需要解决跨域问题，小程序需要配置download
+
+## 打赏
+
+如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。  
+![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/alipay.png)
+![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/wpay.png)