Mac系统微信小程序的保存位置和缓存清除-CFANZ编程社区

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>

2.5 结果展示

好了，本文就到这里吧，点个关注再走嘛~