android应用开发基础_想做网站该怎么操作_seo排名哪家公司好_seo搜索引擎优化就业指导

二维码采用的是qrcode

条形码采用的是jsbarcode

一、安装插件

npm install qrcode --savenpm install jsbarcode --save

二、准备容器

<canvas id="qrcodeCanvas"></canvas> <!-- 用于显示二维码 --><!-- 用于显示条形码的 svg   这里必须是用svg 用canvas会很小而且扫描不好--><svg style="width: 630rpx; height: 134rpx;margin-top: 20rpx" :id="`svg-${item.hyxh}`"></svg>

三、准备函数

import QRCode from 'qrcode';
const text ='内容或网址'
const dom = document.querySelector('#qrcodeCanvas');
// 生成二维码的函数const generateQRCode = (text: string) => {if (dom) {QRCode.toCanvas(dom, text, {width: 200,  // 二维码宽度 定位pxmargin: 2,   // 外边距}, (error) => {if (error) {console.error(error);} else {console.log('二维码生成成功');}});}};
//需要注意的是这里的dom 一定是canvas标签 如果使用uniapp需要 为 
//document.querySelector('#qrcodeCanvas canvas');
//因为uniapp会包一层

条形码

const dom = document.querySelector(`#svg-${item.hyxh}`);const text = item.mzhm;try {if (dom) {JsBarcode(dom, text, {format: 'CODE128', // 条形码格式，可以是 'EAN13', 'EAN8', 'CODE128', 'UPC', 'pharmacode'等等lineColor: '#000', // 条形码颜色width: 3, // 每个条形的宽度height: 100, // 条形码的高度displayValue: false, // 是否显示文本fontSize: 18, // 字体大小margin: 10, // 增加边距});} else {console.log('错误');}} catch (error) {console.log(error);}//这里是因为我是一个列表都需要条形码 format: 'CODE128' 一般使用这个就可以了
//这个也是要dom为svg 不过uniapp的svg没有嵌套一层所以可以直接使用