uniapp-x生成App条形码和二维码

使用js的库
JsBarcode.all.min.js
qrcode.min.js

只适用Android，iOS。App的webview可以设置大小，悬浮到其他view之上。

html：
这个一定要设置

typescript 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

typescript 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<title></title>
		<script src="./JsBarcode.all.min.js"></script>
		<script src="./qrcode.min.js"></script>
		<style>
			body {
				width: 100%;
				margin: 0;
				padding: 0;	
			}

			#barcode {
				display: block;
				
			}

			#qrcode img {
				display: block;
				
			}
		</style>
	</head>
	<body>
		

		<div id="qr_parent"
			style="width: 100%;display: flex;flex-direction: column;align-items: center;margin: 0;padding: 0;">
			<!-- <div style="width: 98%;height: 1px;background: red;"></div> -->

			<svg id="barcode" style="width:100%;height: 60px;"></svg>
			<!-- <div style="width: 98%;height: 1px;background: red;"></div> -->

			<div id="gap" style="width: 100%;height: 15px;background: white;"></div>
			<!-- <div style="width: 98%;height: 1px;background: red;"></div> -->
			<div id="qrcode"></div>
			<!-- <div style="width: 98%;height: 1px;background: red;"></div> -->

		</div>



		<script>
			// document.addEventListener('touchstart', function(e) {
			// 	e.preventDefault();

			// }, {
			// 	passive: false
			// });

			// window.addEventListener('load', () => {
			// 	let bodyWidth = document.body.clientWidth;
			// 	console.log('body宽度(px):', bodyWidth);
			// 	alert('body宽度(px):' + bodyWidth + " h = " + document.body.clientHeight)
			// });

			function generate() {
				// 1. 获取 URL 参数
				const params = new URLSearchParams(window.location.search);
				//内容
				const content = params.get('content') || "";
				// 二维码宽，高
				const w = parseInt(params.get('w')) || 278; // QR宽/条码线条宽基数
				//条形码高度 不用
				const h = parseInt(params.get('h')) || 60;
				const onlyQrCode = parseInt(params.get('onlyQrCode')) || ''; //1：仅生成二维码

				// QR宽/条码线条宽基数
				const bar_one_w = parseInt(params.get('bar_one_w')) || 278;
				// 条形码高度
				const bar_one_h = parseInt(params.get('bar_one_h')) || 60;

				// alert("二维码宽高 " + " w = " + w)

				if (onlyQrCode == '1') {
					document.getElementById("barcode").style.display = 'none'
					document.getElementById("gap").style.display = 'none'
				}

				//整体高度设置
				// document.getElementById("qr_parent").style.width = bar_one_w + "px"
				// document.getElementById("qr_parent").style.height = bar_one_w + "px"

				// alert("条形码宽高 =" + " bar_one_w =" + bar_one_w + " h = " + h)
				// 2. 生成条形码
				if (onlyQrCode != '1') {
					try {

						// 估算模块总数（不同 format 略有差异，CODE128 大约为字符数 × 11）
						const estimatedModules = content.length * 11 + 35; // 经验值，可微调
						// 最大允许的 width = (容器宽 - 边距) / 模块总数
						const rawWidth = (bar_one_w - 10) / estimatedModules;
						const calcWidth = parseFloat(rawWidth.toFixed(2));

						// alert("calcWidth = " + calcWidth)

						JsBarcode("#barcode", content, {
							format: "CODE128",
							width: calcWidth, // Math.floor(bar_one_w / 100) 根据w自动缩放线条宽度
							height: bar_one_h,
							displayValue: false, // 不显示下方数字
							margin: 0
						});
					} catch (e) {
						console.error("条形码生成失败，可能内容格式不符");
					}
				}

				// 3. 生成二维码
				const qrcodeDiv = document.getElementById("qrcode");
				qrcodeDiv.innerHTML = ""; // 清空
				new QRCode(qrcodeDiv, {
					text: content,
					width: w,
					height: w,
					colorDark: "#000000",
					colorLight: "#ffffff",
					correctLevel: QRCode.CorrectLevel.H
				});
			}

			// 加载时执行
			window.onload = generate;
		</script>
	</body>
</html>

UTS中使用：

qrcode_w：二维码宽高

bar_one_w：条形码宽度

bar_one_h：条形码高度

typescript 复制代码

template中：
<web-view class="web_code"
					:src="`/static/qrcode/qr.html?content=${card_num}&w=${qrcode_w}&bar_one_w=${bar_one_w}&bar_one_h=${bar_one_h}`"></web-view>

script中：

let qrcode_w = ref(0)
let bar_one_w = ref(0)
let bar_one_h = ref(0)

onLoad((options : OnLoadOptions) => {
		qrcode_w.value = uni.rpx2px(360)
		bar_one_w.value = uni.rpx2px(580)
		bar_one_h.value = uni.rpx2px(124)
})

style中：
/* 二维码360rpx 一维码124rpx */
	.web_code {
		width: 580rpx;
		height: 530rpx;
		padding: 0;
		margin: 0;
	}