关于支付宝小程序使用wxbarcode需要生成条形码的源码修改

参考版本基础库2.7.0及以上新版Canvas

首先参考了这篇文章：https://blog.csdn.net/wh13267207590/article/details/102552024

也是利用wxbarcode库，然后对其修改源码，步骤如下：

首先修改/node_modules/wxbarcode/demo/utils/index.js，将其改为新版小程序的获取canvas方法

var barcode = require('./barcode');
var qrcode = require('./qrcode');function convert_length(length) { return Math.round(my.getSystemInfoSync().windowWidth * length / 750);
}function barc(ctx, code, width, height) {  barcode.code128(ctx.getContext('2d'), code, convert_length(width), convert_length(height))
}function qrc(ctx, code, width, height) { qrcode.api.draw(code, {ctx: ctx,width: convert_length(width),height: convert_length(height)})
}module.exports = {barcode: barc,qrcode: qrc
}

这里我们直接在页面中获取到ctx，防止DOM未渲染的情况出现，当然也有别的处理方式，随需求就好

2.到这里我发现并无法渲染出条形码，一番断点发现setFillStyle这个方法为undefined，阻止了代码执行，于是再修改：

//node_modules/wxbarcode/demo/utils/barcode.js  大概在277行
//use native color
Graphics.prototype._fillRect = function(x, y, width, height, color) {this.ctx.fillStyle = color;this.ctx.fillRect(x, y, width, height)
}

因为需求只使用了条形码，未测试二维码。

然后在页面中使用：

axml，注意canvas一定要设置type，新版规定，宽高也要设置，否则无法显示

<canvas width="300" height="300" id="barcode" type="2d"></canvas>

js，最好给个延迟，等待DOM渲染，否则无法获取

let query = my.createSelectorQuery();
query.select("#barcode").node().exec((res) => { const canvas = res[0].node; barcode(canvas,"123123123",400, 400)
});

另外，在使用时突然发现真机上会出现支付宝闪退的问题，修复如下：

//node_modules/wxbarcode/demo/utils/barcode.js 63行将 ctx.drawImage();注掉即可正常显示
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.drawImage();
}

最后终于渲染出了条形码

关于支付宝小程序使用wxbarcode需要生成条形码的源码修改相关推荐

基于微信小程序的springboot客运汽车票购票系统源码和论文
在客运公司工作 7 年之余,对客运管理的难度深有感触.特别是在春运期间购票难依旧是长途汽车订票的一大难题.长途汽车和火车的订票管理虽然有差异,但大体上是相同的.长途汽车在售票的过程中需要对旅客的起 ...
Java生鲜电商平台-小程序或者APP优惠券的设计与源码实战
Java生鲜电商平台-小程序或者APP优惠券的设计与源码实战说明:Java生鲜电商平台-小程序或者APP优惠券的设计与源码实战,优惠券是一种常见的促销方式,在规定的周期内购买对应商品类型和额度的商品 ...
微擎小程序怎么配置服务器域名,随便撸源码源码微擎小程序通用配置图文教程，教会你怎么配置微擎小程序！...
最近很多网友都在问站长微擎小程序如何配置使用,微擎小程序配置查看更多关于微擎小程序配置的文章主要分几类,之前已经写过人人商城小程序的配置教程了,大家反响非常好,简单就学会了配置人人商城小程序. ...
微信小程序：云开发表情包制作源码
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
python 自动化微信小程序_干货 | 微信小程序自动化测试最佳实践（附 Python 源码）...
原标题:干货 | 微信小程序自动化测试最佳实践(附 Python 源码) 本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版. 随着微信小程序的功能和生态日益完善, ...
最新小程序授权+php后端（附demo源码）
参考博客:小程序授权+php后端(附demo源码)_流情的博客-CSDN博客_php小程序正所谓计划永远赶不上变化,鉴于小程序端已经更改了微信授权登录的接口,因此特来补充一下.原先的wx.getUs ...
uniapp 小程序、H5 点餐、外卖源码
uniapp 小程序.H5 点餐.外卖源码声明:前端源码是使用原作者提供的开源项目.后端云函数是本人自己开发,
微信小程序：笑话与趣图框架源码下载
这是一款以笑话和趣味图为主的一款微信小程序源码或者也可以说是一个框架吧里面的内容是内置在小程序里面的,所以说是一款框架也可以因为内置的内容,所以内容数量有限! 大家可以用来养账号,或者有能力的二 ...
WoShop多商户直播短视频APP小程序商城全开源无加密商城源码
WoShop多商户直播短视频APP小程序商城全开源无加密商城源码基于现场直播+购物模式,用户可以"边看边买"现场直播商城平台,全终端支持,统一管理后台,传播更强,管理更方便,支持 ...

关于支付宝小程序使用wxbarcode需要生成条形码的源码修改

参考版本基础库2.7.0及以上新版Canvas

首先参考了这篇文章：https://blog.csdn.net/wh13267207590/article/details/102552024

关于支付宝小程序使用wxbarcode需要生成条形码的源码修改相关推荐

最新文章

热门文章