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

使用js的库JsBarcode.all.min.jsqrcode.min.js只适用AndroidiOS。App的webview可以设置大小悬浮到其他view之上。html这个一定要设置meta nameviewportcontentwidthdevice-width, initial-scale1.0, user-scalableno!DOCTYPEhtmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, initial-scale1.0, user-scalablenotitle/titlescript src./JsBarcode.all.min.js/scriptscript src./qrcode.min.js/scriptstylebody{width:100%;margin:0;padding:0;}#barcode{display:block;}#qrcode img{display:block;}/style/headbodydiv idqr_parentstylewidth: 100%;display: flex;flex-direction: column;align-items: center;margin: 0;padding: 0;!--div stylewidth: 98%;height: 1px;background: red;/div--svg idbarcodestylewidth:100%;height: 60px;/svg!--div stylewidth: 98%;height: 1px;background: red;/div--div idgapstylewidth: 100%;height: 15px;background: white;/div!--div stylewidth: 98%;height: 1px;background: red;/div--div idqrcode/div!--div stylewidth: 98%;height: 1px;background: red;/div--/divscript// 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)// });functiongenerate(){// 1. 获取 URL 参数constparamsnewURLSearchParams(window.location.search);//内容constcontentparams.get(content)||;// 二维码宽高constwparseInt(params.get(w))||278;// QR宽/条码线条宽基数//条形码高度 不用consthparseInt(params.get(h))||60;constonlyQrCodeparseInt(params.get(onlyQrCode))||;//1仅生成二维码// QR宽/条码线条宽基数constbar_one_wparseInt(params.get(bar_one_w))||278;// 条形码高度constbar_one_hparseInt(params.get(bar_one_h))||60;// alert(二维码宽高 w w)if(onlyQrCode1){document.getElementById(barcode).style.displaynonedocument.getElementById(gap).style.displaynone}//整体高度设置// 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 大约为字符数 × 11constestimatedModulescontent.length*1135;// 经验值可微调// 最大允许的 width (容器宽 - 边距) / 模块总数constrawWidth(bar_one_w-10)/estimatedModules;constcalcWidthparseFloat(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. 生成二维码constqrcodeDivdocument.getElementById(qrcode);qrcodeDiv.innerHTML;// 清空newQRCode(qrcodeDiv,{text:content,width:w,height:w,colorDark:#000000,colorLight:#ffffff,correctLevel:QRCode.CorrectLevel.H});}// 加载时执行window.onloadgenerate;/script/body/htmlUTS中使用qrcode_w二维码宽高bar_one_w条形码宽度bar_one_h条形码高度template中web-viewclassweb_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-viewscript中letqrcode_wref(0)letbar_one_wref(0)letbar_one_href(0)onLoad((options:OnLoadOptions){qrcode_w.valueuni.rpx2px(360)bar_one_w.valueuni.rpx2px(580)bar_one_h.valueuni.rpx2px(124)})style中/* 二维码360rpx 一维码124rpx */.web_code{width:580rpx;height:530rpx;padding:0;margin:0;}