「这是我参与11月更文挑战的第12天,活动详情查看:2021最后一次更文挑战」
前言
一开始做的只是显示一个兑换码的字符串,后面客户嫌自己输入麻烦(要我输,我也觉得麻烦,23333),后来改为条形码的方式,客户使用扫码枪,直接扫入系统核销。
创建barcode_util.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
}
barcode.js文件请查看
wxml文件
创建一个canvas标签,存放条形码
<canvas canvas-id="{{couponItemid}}" style="width:400rpx;height:100rpx;display:block;margin:0 auto"></canvas>
组件js文件
引入封装的barcode_util.js
文件,初始化这个条形码的参数(canvasid,条形码数字,宽度,高度)
这里的宽度数字不宜太大,我再设置600的时候,发现扫码枪,扫描不上,当时还以为是代码哪里有问题,搞了半天是这里的宽度数字过大,影响的。
var wxbarcode = require('../../utils/barcode_util.js');
wxbarcode.barcode(that.data.couponItemid, item.check_code, 400, 100);
遇到的问题
我这里做的是一个循环列表,点击生成条形码的需求,单个页面,单个条形码生成,不存在这个问题。
情况是这样子的,循环列表,点击生成条形码,弹框显示隐藏,生成条形码的盒子一直就是一个,第一次生成没有问题,第二次点击的时候,就显示空白了,因为canvas的id没有改变。
先来说说我的解决办法
我这里用的方法,比较简单,而且不是很好的方法,大家是怎么解决的,还请大神们评论区告知一下,我好优化优化我的代码。23333
我这里定义了一个couponItemid,没点击一次,在原始的数据上,重新加一层C+1,更新这个ID每次不重样,是不是比较武力的解决办法,哈哈。
popup: function (e) {
var that = this
var item = e.currentTarget.dataset.item;
console.log(item)
this.setData({
showModal: true,
couponItemid:'c'+that.data.couponItemid + 1,
couponItem:item
})
wxbarcode.barcode(that.data.couponItemid, item.check_code, 400, 100);
},
总结
这是第一次使用条形码做扫码枪的识别,之前一直都是用的二维码的方式,希望以后不迷路。很希望得到大神们给予我遇到的哪个问题的优化方案。