微信小程序---条形码展示

最新推荐文章于 2025-04-20 09:10:50 发布

小小黑007

最新推荐文章于 2025-04-20 09:10:50 发布

阅读量1.2k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/heavenz19/article/details/118186143

版权

微信小程序专栏收录该内容

42 篇文章

订阅专栏

该博客介绍了如何在微信小程序中使用js封装的条形码生成库，通过`wx.createCanvasContext`创建画布上下文，并利用转换函数调整条形码尺寸，以适应不同设备的屏幕宽度。在指定的id和条形码代码基础上，设置条形码的宽度和高度，实现了动态加载条形码的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序—条形码展示

在这里插入图片描述
条形码js封装 —index.js

var barcode = require('./barcode'); 
function convert_length(length) { 
  return Math.round(wx.getSystemInfoSync().windowWidth * length / 750); 
} 
function barc(id, code, width, height) { 
  barcode.code128(wx.createCanvasContext(id), code, convert_length(width), convert_length(height)) 
} module.exports = { barcode: barc }

调用index.js

const app = getApp()
var wxbarcode = require('../../utils/index.js');
barcodes(datas){
    var that = this;
    wx.showLoading({
      title: '条形码加载中',
    })
    var barcodes = datas
    console.log('barcodes:', barcodes)
    setTimeout(function () {
      wx.hideLoading()
      wxbarcode.barcode('barcode', datas, 402, 150); //后面的数字可以控制条形码的粗细显示
    }, 2000);    
    that.setData({
      barcodes: barcodes,
    })
  },