小程序uni-app生成条形码

一、看下效果图

二、废话不多说，直接上代码
1.页面增加存放条形码的标签

<canvas class="bar_code" canvas-id="Brcode"></canvas>

2.引入barcode.js，后面会放上

import brCode from "../../utils/barcode.js"

3.在自己的methods中写入生成条形码的方法

brCode.code128(wx.createCanvasContext('Brcode'), coupon.GiftNo, uni.getSystemInfoSync().windowWidth, this.convert_length(100));

其中code128为barcode.js的导出函数，需要传入四个参数。
第一个参数创建 canvas 绘图上下文并且制定了创建canvasId，这里的canvasId为Brcode，需要与第一步骤的id对上；
第二个参数为礼券的编号，我自己定义的是需要将礼券编号转成条形码
第三、四个参数分别为宽度、高度，可以根据自己需求来定
这样我们的条形码就成功生成了

三、barcode.js 文件的代码，本来想上传js文件，后来没找到地方上传，干脆把代码直接上了

var CHAR_TILDE = 126;
var CODE_FNC1 = 102;var SET_STARTA = 103;
var SET_STARTB = 104;
var SET_STARTC = 105;
var SET_SHIFT = 98;
var SET_CODEA = 101;
var SET_CODEB = 100;
var SET_STOP = 106;var REPLACE_CODES = {CHAR_TILDE: CODE_FNC1 //~ corresponds to FNC1 in GS1-128 standard
}var CODESET = {ANY: 1,AB: 2,A: 3,B: 4,C: 5
};function getBytes(str) {var bytes = [];for (var i = 0; i < str.length; i++) {bytes.push(str.charCodeAt(i));}return bytes;
}exports.code128 = function (ctx, text, width, height) {width = parseInt(width);height = parseInt(height);var codes = stringToCode128(text);var g = new Graphics(ctx, width, height);var barWeight = g.area.width / ((codes.length - 3) * 11 + 35);var x = g.area.left;var y = g.area.top;for (var i = 0; i < codes.length; i++) {var c = codes[i];//two bars at a time: 1 black and 1 whitefor (var bar = 0; bar < 8; bar += 2) {var barW = PATTERNS[c][bar] * barWeight;// var barH = height - y - this.border;var barH = height - y;var spcW = PATTERNS[c][bar + 1] * barWeight;//no need to draw if 0 widthif (barW > 0) {g.fillFgRect(x, y, barW, barH);}x += barW + spcW;}}ctx.draw();
}function stringToCode128(text) {var barc = {currcs: CODESET.C};var bytes = getBytes(text);//decide starting codesetvar index = bytes[0] == CHAR_TILDE ? 1 : 0;var csa1 = bytes.length > 0 ? codeSetAllowedFor(bytes[index++]) : CODESET.AB;var csa2 = bytes.length > 0 ? codeSetAllowedFor(bytes[index++]) : CODESET.AB;barc.currcs = getBestStartSet(csa1, csa2);barc.currcs = perhapsCodeC(bytes, barc.currcs);//if no codeset changes this will end up with bytes.length+3//start, checksum and stopvar codes = new Array();switch (barc.currcs) {case CODESET.A:codes.push(SET_STARTA);break;case CODESET.B:codes.push(SET_STARTB);break;default:codes.push(SET_STARTC);break;}for (var i = 0; i < bytes.length; i++) {var b1 = bytes[i]; //get the first of a pair//should we translate/replaceif (b1 in REPLACE_CODES) {codes.push(REPLACE_CODES[b1]);i++ //jump to nextb1 = bytes[i];}//get the next in the pair if possiblevar b2 = bytes.length > (i + 1) ? bytes[i + 1] : -1;codes = codes.concat(codesForChar(b1, b2, barc.currcs));//code C takes 2 chars each timeif (barc.currcs == CODESET.C) i++;}//calculate checksum according to Code 128 standardsvar checksum = codes[0];for (var weight = 1; weight < codes.length; weight++) {checksum += (weight * codes[weight]);}codes.push(checksum % 103);codes.push(SET_STOP);//encoding should now be completereturn codes;function getBestStartSet(csa1, csa2) {//tries to figure out the best codeset//to start with to get the most compact codevar vote = 0;vote += csa1 == CODESET.A ? 1 : 0;vote += csa1 == CODESET.B ? -1 : 0;vote += csa2 == CODESET.A ? 1 : 0;vote += csa2 == CODESET.B ? -1 : 0;//tie goes to B due to my own predudicesreturn vote > 0 ? CODESET.A : CODESET.B;}function perhapsCodeC(bytes, codeset) {for (var i = 0; i < bytes.length; i++) {var b = bytes[i]if ((b < 48 || b > 57) && b != CHAR_TILDE)return codeset;}return CODESET.C;}//chr1 is current byte//chr2 is the next byte to process. looks ahead.function codesForChar(chr1, chr2, currcs) {var result = [];var shifter = -1;if (charCompatible(chr1, currcs)) {if (currcs == CODESET.C) {if (chr2 == -1) {shifter = SET_CODEB;currcs = CODESET.B;}else if ((chr2 != -1) && !charCompatible(chr2, currcs)) {//need to check ahead as wellif (charCompatible(chr2, CODESET.A)) {shifter = SET_CODEA;currcs = CODESET.A;}else {shifter = SET_CODEB;currcs = CODESET.B;}}}}else {//if there is a next char AND that next char is also not compatibleif ((chr2 != -1) && !charCompatible(chr2, currcs)) {//need to switch code setsswitch (currcs) {case CODESET.A:shifter = SET_CODEB;currcs = CODESET.B;break;case CODESET.B:shifter = SET_CODEA;currcs = CODESET.A;break;}}else {//no need to shift code sets, a temporary SHIFT will sufficeshifter = SET_SHIFT;}}//ok some type of shift is nessecaryif (shifter != -1) {result.push(shifter);result.push(codeValue(chr2));}else {if (currcs == CODESET.C) {//include next as wellresult.push(codeValue(chr1, chr2));}else {result.push(codeValue(chr1));}}barc.currcs = currcs;return result;}
}//reduce the ascii code to fit into the Code128 char table
function codeValue(chr1, chr2) {if (typeof chr2 == "undefined") {return chr1 >= 32 ? chr1 - 32 : chr1 + 64;}else {return parseInt(String.fromCharCode(chr1) + String.fromCharCode(chr2));}
}function charCompatible(chr, codeset) {var csa = codeSetAllowedFor(chr);if (csa == CODESET.ANY) return true;//if we need to change from currentif (csa == CODESET.AB) return true;if (csa == CODESET.A && codeset == CODESET.A) return true;if (csa == CODESET.B && codeset == CODESET.B) return true;return false;
}function codeSetAllowedFor(chr) {if (chr >= 48 && chr <= 57) {//0-9return CODESET.ANY;}else if (chr >= 32 && chr <= 95) {//0-9 A-Zreturn CODESET.AB;}else {//if non printablereturn chr < 32 ? CODESET.A : CODESET.B;}
}var Graphics = function(ctx, width, height) {this.width = width;this.height = height;this.quiet = Math.round(this.width / 40);this.border_size   = 0;this.padding_width = 0;this.area = {width : width - this.padding_width * 2 - this.quiet * 2,height: height - this.border_size * 2,top   : this.border_size - 4,left  : this.padding_width + this.quiet};this.ctx = ctx;this.fg = "#000000";this.bg = "#ffffff";// fill backgroundthis.fillBgRect(0,0, width, height);// fill center to create borderthis.fillBgRect(0, this.border_size, width, height - this.border_size * 2);
}//use native color
Graphics.prototype._fillRect = function(x, y, width, height, color) {this.ctx.setFillStyle(color)this.ctx.fillRect(x, y, width, height)
}Graphics.prototype.fillFgRect = function(x,y, width, height) {this._fillRect(x, y, width, height, this.fg);
}Graphics.prototype.fillBgRect = function(x,y, width, height) {this._fillRect(x, y, width, height, this.bg);
}var PATTERNS = [[2, 1, 2, 2, 2, 2, 0, 0],  // 0[2, 2, 2, 1, 2, 2, 0, 0],  // 1[2, 2, 2, 2, 2, 1, 0, 0],  // 2[1, 2, 1, 2, 2, 3, 0, 0],  // 3[1, 2, 1, 3, 2, 2, 0, 0],  // 4[1, 3, 1, 2, 2, 2, 0, 0],  // 5[1, 2, 2, 2, 1, 3, 0, 0],  // 6[1, 2, 2, 3, 1, 2, 0, 0],  // 7[1, 3, 2, 2, 1, 2, 0, 0],  // 8[2, 2, 1, 2, 1, 3, 0, 0],  // 9[2, 2, 1, 3, 1, 2, 0, 0],  // 10[2, 3, 1, 2, 1, 2, 0, 0],  // 11[1, 1, 2, 2, 3, 2, 0, 0],  // 12[1, 2, 2, 1, 3, 2, 0, 0],  // 13[1, 2, 2, 2, 3, 1, 0, 0],  // 14[1, 1, 3, 2, 2, 2, 0, 0],  // 15[1, 2, 3, 1, 2, 2, 0, 0],  // 16[1, 2, 3, 2, 2, 1, 0, 0],  // 17[2, 2, 3, 2, 1, 1, 0, 0],  // 18[2, 2, 1, 1, 3, 2, 0, 0],  // 19[2, 2, 1, 2, 3, 1, 0, 0],  // 20[2, 1, 3, 2, 1, 2, 0, 0],  // 21[2, 2, 3, 1, 1, 2, 0, 0],  // 22[3, 1, 2, 1, 3, 1, 0, 0],  // 23[3, 1, 1, 2, 2, 2, 0, 0],  // 24[3, 2, 1, 1, 2, 2, 0, 0],  // 25[3, 2, 1, 2, 2, 1, 0, 0],  // 26[3, 1, 2, 2, 1, 2, 0, 0],  // 27[3, 2, 2, 1, 1, 2, 0, 0],  // 28[3, 2, 2, 2, 1, 1, 0, 0],  // 29[2, 1, 2, 1, 2, 3, 0, 0],  // 30[2, 1, 2, 3, 2, 1, 0, 0],  // 31[2, 3, 2, 1, 2, 1, 0, 0],  // 32[1, 1, 1, 3, 2, 3, 0, 0],  // 33[1, 3, 1, 1, 2, 3, 0, 0],  // 34[1, 3, 1, 3, 2, 1, 0, 0],  // 35[1, 1, 2, 3, 1, 3, 0, 0],  // 36[1, 3, 2, 1, 1, 3, 0, 0],  // 37[1, 3, 2, 3, 1, 1, 0, 0],  // 38[2, 1, 1, 3, 1, 3, 0, 0],  // 39[2, 3, 1, 1, 1, 3, 0, 0],  // 40[2, 3, 1, 3, 1, 1, 0, 0],  // 41[1, 1, 2, 1, 3, 3, 0, 0],  // 42[1, 1, 2, 3, 3, 1, 0, 0],  // 43[1, 3, 2, 1, 3, 1, 0, 0],  // 44[1, 1, 3, 1, 2, 3, 0, 0],  // 45[1, 1, 3, 3, 2, 1, 0, 0],  // 46[1, 3, 3, 1, 2, 1, 0, 0],  // 47[3, 1, 3, 1, 2, 1, 0, 0],  // 48[2, 1, 1, 3, 3, 1, 0, 0],  // 49[2, 3, 1, 1, 3, 1, 0, 0],  // 50[2, 1, 3, 1, 1, 3, 0, 0],  // 51[2, 1, 3, 3, 1, 1, 0, 0],  // 52[2, 1, 3, 1, 3, 1, 0, 0],  // 53[3, 1, 1, 1, 2, 3, 0, 0],  // 54[3, 1, 1, 3, 2, 1, 0, 0],  // 55[3, 3, 1, 1, 2, 1, 0, 0],  // 56[3, 1, 2, 1, 1, 3, 0, 0],  // 57[3, 1, 2, 3, 1, 1, 0, 0],  // 58[3, 3, 2, 1, 1, 1, 0, 0],  // 59[3, 1, 4, 1, 1, 1, 0, 0],  // 60[2, 2, 1, 4, 1, 1, 0, 0],  // 61[4, 3, 1, 1, 1, 1, 0, 0],  // 62[1, 1, 1, 2, 2, 4, 0, 0],  // 63[1, 1, 1, 4, 2, 2, 0, 0],  // 64[1, 2, 1, 1, 2, 4, 0, 0],  // 65[1, 2, 1, 4, 2, 1, 0, 0],  // 66[1, 4, 1, 1, 2, 2, 0, 0],  // 67[1, 4, 1, 2, 2, 1, 0, 0],  // 68[1, 1, 2, 2, 1, 4, 0, 0],  // 69[1, 1, 2, 4, 1, 2, 0, 0],  // 70[1, 2, 2, 1, 1, 4, 0, 0],  // 71[1, 2, 2, 4, 1, 1, 0, 0],  // 72[1, 4, 2, 1, 1, 2, 0, 0],  // 73[1, 4, 2, 2, 1, 1, 0, 0],  // 74[2, 4, 1, 2, 1, 1, 0, 0],  // 75[2, 2, 1, 1, 1, 4, 0, 0],  // 76[4, 1, 3, 1, 1, 1, 0, 0],  // 77[2, 4, 1, 1, 1, 2, 0, 0],  // 78[1, 3, 4, 1, 1, 1, 0, 0],  // 79[1, 1, 1, 2, 4, 2, 0, 0],  // 80[1, 2, 1, 1, 4, 2, 0, 0],  // 81[1, 2, 1, 2, 4, 1, 0, 0],  // 82[1, 1, 4, 2, 1, 2, 0, 0],  // 83[1, 2, 4, 1, 1, 2, 0, 0],  // 84[1, 2, 4, 2, 1, 1, 0, 0],  // 85[4, 1, 1, 2, 1, 2, 0, 0],  // 86[4, 2, 1, 1, 1, 2, 0, 0],  // 87[4, 2, 1, 2, 1, 1, 0, 0],  // 88[2, 1, 2, 1, 4, 1, 0, 0],  // 89[2, 1, 4, 1, 2, 1, 0, 0],  // 90[4, 1, 2, 1, 2, 1, 0, 0],  // 91[1, 1, 1, 1, 4, 3, 0, 0],  // 92[1, 1, 1, 3, 4, 1, 0, 0],  // 93[1, 3, 1, 1, 4, 1, 0, 0],  // 94[1, 1, 4, 1, 1, 3, 0, 0],  // 95[1, 1, 4, 3, 1, 1, 0, 0],  // 96[4, 1, 1, 1, 1, 3, 0, 0],  // 97[4, 1, 1, 3, 1, 1, 0, 0],  // 98[1, 1, 3, 1, 4, 1, 0, 0],  // 99[1, 1, 4, 1, 3, 1, 0, 0],  // 100[3, 1, 1, 1, 4, 1, 0, 0],  // 101[4, 1, 1, 1, 3, 1, 0, 0],  // 102[2, 1, 1, 4, 1, 2, 0, 0],  // 103[2, 1, 1, 2, 1, 4, 0, 0],  // 104[2, 1, 1, 2, 3, 2, 0, 0],  // 105[2, 3, 3, 1, 1, 1, 2, 0]   // 106
]

小程序uni-app生成条形码相关推荐

Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的，一键生成代码和API接口的，通用后台管理系统快速开发框架，开发小程序和APP的推荐框架！
Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的,一键生成代码和API接口的,通用后台管理系统快速开发框架,开发小程序和APP的推荐框架! 概述 R ...
hbuilderx 小程序分包_很酷的HBuilderX和uni-app，开发一次既能生成小程序又能生成App...
很酷的HBuilderX和uni-app,开发一次既能生成小程序又能生成App 创业者福利,做一次小程序和APP都有了更流畅由于基于C++架构而非eclipse或webkit架构,HX在启动速度. ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(一）---基础页面框架搭建
写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...
微信不再提供小程序打开App？借助H5为App引流的方式你必须知道！
简介: 2021年5月14日App开发者领域发布了一条重要消息:微信开放平台为了提升用户体验,将于2021年5月20日(后来延期到2021年5月27日)起不再提供"小程序打开App技术服务& ...
微信小程序中app.js文件、组件、api
app.js文件: 每个小程序都需要在app.js中调用 App 方法注册小程序实例. App({//App实例化,整个小程序只有一个App实例,全部页面共享onLaunch: function () ...
小程序和android联调,小程序打开APP指定页面
小程序打开APP指定页面一.小程序端准备 1.最好将小程序基础调试库调整至较为新的版本.(我选择的是大于2.5.1的版本) 2.从官网把代码 copy 过来,记得看看 button 的小程序打开ap ...
微信小程序uni.getImageInfo踩坑大计划
B站https://www.bilibili.com/read/cv6317437 如果你在使用getImageInfo的时候真机调试没问题,上传生成体验版的时候或者是线上版本没反应,主要原因是网络图 ...
微信小程序开发—— app.json
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置.文件内容为一个 JSON 对象,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. app.json全局配置小 ...
运营版uniapp多商户商城小程序+H5+APP+商家入驻短视频社区种草直播阶梯拼团
运营版uniapp多商户商城小程序+H5+APP+商家入驻短视频社区种草直播阶梯拼团前后端全套源码, 支持二次开发,代码无加密! 独立商家后台用于店铺商品管理订单管理发货管理等多类经营模式多商 ...
小程序转 App 帮助企业打开营销局面
在 Web 1.0 时代我们只能通过电脑访问门户网站,单向获取内容,被动接受内容,没有互动体验.而随着社交媒体的快速发展下,迎来了 Web 2.0 时代,我们开始注重交互体验,于是用户一边成为内容的生 ...

小程序uni-app生成条形码

小程序uni-app生成条形码相关推荐

最新文章

热门文章