小程序 生成条形码barcode.js

1、下载barcode.js,新建一个文件wxbarcode.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)) //参数1:页面接收生成条形码的容器 参数2:需要生成条形码的code 参数3:条形码的宽度 参数4:条形码的高度
}
 

module.exports = {
    barcode: barc
}

2、在需要使用的页面引入wxbarcode.js

const wxbarcode = require('wxbarcode.js');

//在拿到生成条形码的id后调用
 wxbarcode.barcode('barcode', code, 490, 80); //注意在wxml中设置一个如代码id为barcode的wxml容器

3、注意:

由于barcode.js的条形码的位置实际是通过获取页面相关元素的高度后定位而得到的位置,

所以如果在条形码元素的前面,有通过手动计算后得到高度的元素,那么条形码的位置可能会出现偏差。

所以条形码前面的图片元素不能使用mode='widthFix'属性,元素不能通过计算得到高度,最好通过wxss设置固定高。

 

转载于:https://www.cnblogs.com/muzs/p/11212443.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值