【前端】Vue项目和微信小程序生成二维码和条形码_Javascript

import wxbarcode from 'wxbarcode'

wxbarcode.barcode('barcode', '1234567890123456789', 680, 200);
wxbarcode.qrcode('qrcode', '1234567890123456789', 420, 420);

3. 条形码

函数名：barcode

函数原型：barcode(id, code, width, height)

参数：

4. 二维码

函数名：qrcode

函数原型：qrcode(id, code, width, height)

参数：

5. 具体实例

utils文件下载地址，此步骤是必须的

pages/index/index.js

//index.js
var wxbarcode = require("../../utils/index.js");

page({
  data: {
    code: "1234567890123456789",
  },

  onload: function () {
    wxbarcode.barcode("barcode", "1234567890123456789", 680, 200);
    wxbarcode.qrcode("qrcode", "1234567890123456789", {
      codesize: 420,
      color: "#ff0000",
      bgcolor: "#ffffff",
    });
  },
});

pages/index/index.wxml

<!--index.wxml-->
<view class="container page">
  <view class="panel">
    <view class="header">
    </view>
    <view class="barcode">
      <view class="barnum">{{code}}</view>
      <canvas canvas-id="barcode" />
    </view>
    <view class="qrcode">
      <canvas canvas-id="qrcode" />
    </view>
  </view>
</view>

三、vue 生成二维码(qrcodejs)和条形码（barcode）

1. vue 生成二维码(qrcodejs）

1.1 安装依赖

npm i qrcodejs2 --save

1.2 组件内使用

import qrcode from 'qrcodejs2'

// 1、简单使用：
const qrcode = new qrcode(qrcodediv, 'this is qrcode')

// 2、复杂使用
const qrcode = new qrcode(qrcodediv, {
    text: 'this is qrcode', // 用于生成二维码的文本
    width: 200, // 高度
    height: 200, // 宽度
    colordark: '#000000', //前景色
    colorlight: '#ffffff', //后景色
    correctlevel: qrcode.correctlevel.h, //容错级别 qrcode.correctlevel.l qrcode.correctlevel.m qrcode.correctlevel.q qrcode.correctlevel.h
})

1.3 完整实例

<template>
  <div>
      <div id="qrcode" ref="qrcodediv"></div> 
  </div>
</template>

<script> 

import qrcode from 'qrcodejs2';  // 引入 qrcode

export default {
  name: "cdsqrcode2", 
  data() {
    return { 
    };
  },
  mounted() {
    this.getcode();
  }, 
  methods: {
      getcode() { 
          new qrcode(this.$refs.qrcodediv, {
            text: 'this is qrcode', // 用于生成二维码的文本
            width: 200,
            height: 200,
            colordark: '#333', //二维码颜色
            colorlight: '#fff', //二维码背景色
            correctlevel: qrcode.correctlevel.l//容错率，l/m/h
          })  
    },

  }
};
</script>

2. vue 条形码（barcode）

2.1 安装依赖

npm install jsbarcode --save

2.2 main.js中全局引入

import jsbarcode from 'jsbarcode'
vue.prototype.jsbarcode = jsbarcode

2.3 定义组件

'@/components/barcode'

<template>
    <div class="barcode-wrapper">
        <img :style="widthstyleobj" class="barcode" />
    </div>
</template>
  
<script>
import jsbarcode from 'jsbarcode'
export default {
    props: {
        jsbarcodedata: {
            type: object,
        },
    }, 
    mounted() {
        this.$nexttick(() => {
            jsbarcode('.barcode', string(this.jsbarcodedata.text), {     
                 // format: "code39",//选择要使用的条形码类型 --  default: "auto" (code128)
                  width:1,//设置条之间的宽度
                  height:40,//高度
                  displayvalue:false ,//是否在条形码下方显示文字
            //   text:"456",//覆盖显示的文本
            //   fontoptions:"bold italic",//使文字加粗体或变斜体
            //   font:"fantasy",//设置文本的字体
            //   textalign:"left",//设置文本的水平对齐方式
            //   textposition:"top",//设置文本的垂直位置
            //   textmargin:5,//设置条形码和文本之间的间距
                 fontsize:15,//设置文本的大小
                 background: this.jsbarcodedata.background,,//设置条形码的背景
                 linecolor: this.jsbarcodedata.linecolor,//设置条和文本的颜色。
                 margin:0//设置条形码周围的空白边距
            });
        })
    },
}
</script>
<style scoped>
.barcode-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.barcode {
    max-width: 375px !important
}
</style>

2.4 使用组件

<template>
  <div>
    <barcode :jsbarcodedata="jsbarcodeconfigdata"/>
  </div>
</template>

<script>
import barcode from '@/components/barcode'
export default {
  name: "barcode",
  components: {
    barcode
  },
  data() {
    return {
      jsbarcodeconfigdata : {
            text: '12345678909876543210', // 条形码必须是字符串类型，否则会出现后面几位为数字的情况。
            linecolor: "#333", //条形码颜色
            background: "#fff", //条形码背景色
            width: this.widthstyleobj, 
          }
    }
  },
}
</script>