在微信小程序中使用条形码生成器

此功能是基于插件实现的，具体插件可以自行在插件市场下载使用，下载地址：条形码生成器 - DCloud 插件市场

最终实现效果：

微信APP能够扫码识别的条形码类型有code128\code39\ean13\ean8\upc\itf14，这里使用的是code128

1.将 tki-barcode 添加到对应的components包目录

2.在template中添加

<tk i-barcode :loadMake="false" :opations="opations" :onval="true" format="code128" :val="val" ref="barcode" @result="barresult"></tki-barcode>

3.在script中添加

import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"
export default {
    components: {tkiBarcode},
    data(){
        return{
            opations: {
               width: 4,
               height: 120,
               fontSize: 24,
               fontColor: "#000000",
               displayValue: true,
               textAlign: "center",
               textPosition: "bottom",
               textMargin: 5,
               background: "#FFFFFF",
               margin: 5
            },
            val: "",
            bar: ['barcode']
        }
    }
}

4.style样式调整

.tki-barcode {
		padding: 10rpx 5rpx;
	}

	.tki-barcode>>>image {
		width: 100% !important;
		height: 84rpx;
	}

	.tki-barcode>>>.tki-barcode-canvas {
		width: 100% !important;
		height: 84rpx;
	}

5.onload 中调用生成条形码方法

setTimeout(() => {
		for (let index = 0; index < this.bar.length; index++) {
			setTimeout(() => {
			  this.$refs[this.bar[index]]._makeCode()
			}, 1000 * index);
		 }
}, 1000);