“This is the 12th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

At the beginning, it just showed a string of exchange codes, but later the customer complained that it was troublesome to input them (if I wanted to input, I also felt troublesome, 23333). Later, it was changed to the bar code mode, and the customer used the code scanning gun and directly swept into the system for verification.

Create the barcode_util.js file

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
}
Copy the code

View the barcode. Js file

WXML file

Create a Canvas tag to hold the barcode

<canvas canvas-id="{{couponItemid}}" style="width:400rpx; height:100rpx; display:block; margin:0 auto"></canvas>
Copy the code

Component JS file

Import the encapsulated barcode_util.js file and initialize the barcode parameters (canvasID, barcode number, width, height)

The width number here should not be too large. When I set 600 again, I found that the code scanner could not scan. At that time, I thought there was something wrong with the code, but after a long time, the width number here was too large, which affected me.

var wxbarcode = require('.. /.. /utils/barcode_util.js');
wxbarcode.barcode(that.data.couponItemid, item.check_code, 400.100);
Copy the code

Problems encountered

What I do here is a circular list, click to generate bar code requirements, single page, single bar code generation, there is no problem.

Click to generate a barcode, and the popbox will show and hide. The box that generates the barcode is always the same. There is no problem when it is generated for the first time, but when it is clicked for the second time, it will display blank, because the CANVAS ID has not changed.

Let’s start with my solution

The method I use here is relatively simple and not very good. How do you solve it? Please tell me in the comments section so that I can optimize my code. 23333

Here I define a couponItemid, not click once, add a layer of C+1 to the original data, update this ID every time, is not the same, is not a force solution.

  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);
   },
Copy the code

conclusion

This is the first time to use bar code to identify the scanning gun. Before, it was always using the two-dimensional code. I hope I won’t get lost in the future. I really hope to get the gods to give me the optimization of the problem.