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

Sleepy 发布于2019-08-23 14:48 / 1703人阅读

使用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下来的目录结构）

云服务器 GPU云服务器二维码和条形码 html替换成小程序 cdn中生成链接 java中生成目录

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

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

微信小程序中生成二维码工具：weapp.qrcode.js

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

MarvinZhang 2019-08-26 11:35 评论0 收藏0
【实战教程】使用知晓云完成微信卡券消息的处理

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

Karrdy 2019-08-23 14:23 评论0 收藏0
实现一个扫描商品条码进行评价或留言的小程序（附源码）

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

stefanieliang 2019-08-29 16:38 评论0 收藏0
实现一个扫描商品条码进行评价或留言的小程序（附源码）

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

elina 2019-08-23 11:42 评论0 收藏0