资讯专栏INFORMATION COLUMN

小程序中生成二维码和条形码

Sleepy / 1544人阅读

使用wxbarcode模块可以很方便地生成二维码和条形码。

效果

安装
$ npm install wxbarcode
使用方法
import wxbarcode from "wxbarcode"
 
wxbarcode.barcode("barcode", "1234567890123456789", 680, 200);
wxbarcode.qrcode("qrcode", "1234567890123456789", 420, 420);
条形码

函数名:barcode

函数原型:barcode(id, code, width, height)

参数:

id: wxml文件中的 Canvas ID

code: 用于生成条形码的字符串

width: 生成的条形码宽度,单位 rpx

height: 生成的条形码高度,单位 rpx

二维码

函数名:qrcode

函数原型:qrcode(id, code, width, height)

参数:

id: wxml文件中的 Canvas ID

code: 用于生成二维码的字符串

width: 生成的二维码宽度,单位 rpx

height: 生成的二维码高度,单位 rpx

小程序案例
// 页面所在的js文件
import wxbarcode from "../../utils/qrcode/index.js";
// ...
wxbarcode.barcode("barcode", res.data.voucher_info.closure_code, 680, 150);
wxbarcode.qrcode("qrcode", res.data.voucher_info.closure_code, 340, 340);
// wxml文件

   


   
   
本地wxbarcode目录结构(从github download下来的目录结构)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101172.html

相关文章

  • 微信程序中生维码工具:weapp.qrcode.js

    摘要:前言在近期的小程序开发中,有一个离线生成二维码的需求。所以,针对微信小程序的特点,封装了,用于在小程序中快速生成二维码。由于小程序没有动态创建标签的,所以这一步不能省略。调用绘制方法由于微信小程序不支持引入包,可以将目录下,拷贝至项目中。 前言 在近期的小程序开发中,有一个离线生成二维码的需求。当时想到了一些优秀的前端开源库 jquery-qrcode 和 node-qrcode,由于...

    MarvinZhang 评论0 收藏0
  • 【实战教程】使用知晓云完微信卡券消息的处理

    摘要:此教程将带领大家体验这个新功能,实现一个微信消息推送类型的触发器。进入公众号后台点击开发基本配置服务器配置,同步配置成知晓云消息推送的相关配置,完成配置后,微信消息推送类型的触发器方可使用。 知晓云新推出「消息推送」功能,该功能通过「消息推送」类型的触发器接收微信推送过来的消息,开发者可以对此消息实行相关操作。 此教程将带领大家体验这个新功能,实现一个「微信消息推送」类型的触发器。 该...

    Karrdy 评论0 收藏0
  • 实现一个扫描商品条码进行评价或留言的程序(附源码)

    摘要:功能介绍对准上面的小程序码,扫一下,嘀地一声,扫码成功,打开小程序,进入小程序首页。因为手头上没有可乐,所以我找来了一只非常专业的猫,扮演一瓶的可口可乐演示给大家看。 1.功能介绍 showImg(https://segmentfault.com/img/remote/1460000016260048?w=240&h=240); 对准上面的小程序码,扫一下,‘嘀’~地一声,扫码成功,打...

    stefanieliang 评论0 收藏0
  • 实现一个扫描商品条码进行评价或留言的程序(附源码)

    摘要:功能介绍对准上面的小程序码,扫一下,嘀地一声,扫码成功,打开小程序,进入小程序首页。因为手头上没有可乐,所以我找来了一只非常专业的猫,扮演一瓶的可口可乐演示给大家看。 1.功能介绍 showImg(https://segmentfault.com/img/remote/1460000016260048?w=240&h=240); 对准上面的小程序码,扫一下,‘嘀’~地一声,扫码成功,打...

    elina 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<