公众号H5网页中显示用户二维码，VFP做起来也不难，二套方案都可以
公众号H5网页中显示用户二维码，VFP做起来也不难，二套方案都可以
加菲猫的VFP
发布于 2021-12-08 19:27:52
发布于 2021-12-08 19:27:52
公众号H5网页中显示用户二维码，VFP做起来也不难，二套方案都可以
社群里面的刘总有一套超市管理系统，现在想要将用户的余额和积分显示出来，方案是采用微信公众号的方式，然后我就让美工做了一个设计图
会员中心
其中二维码和一维码的显示方案其实值得讨论一下
- 方案一：前端显示 2 方案二：后端显示
前端生成一维码和二维码方案
前端显示的方式就是后端发送会员卡号等信息JSON到前端，JS运算之生成二维码，一维码。
可以利用QRCode.js来生成二维码
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://www.sn58.cn"); // 设置要生成二维码的链接
</script>
也有一些可选的参数
var qrcode = new QRCode("test", {
text: "http://www.sn58.cn",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
也可以重新清除再生成
qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.mzvfp.com"); // 生成另外一个二维码
利用JsBarCode生成一维码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/JsBarcode.all.js"></script>
</head>
<body>
<svg id="svgcode"></svg>
<!-- or -->
<canvas id="canvascode"></canvas>
<!-- or -->
<img id="imgcode" />
<script>
$("#svgcode").JsBarcode('Hi!');//or JsBarcode("#svgcode", "Hi!");
$("#canvascode").JsBarcode('Hello world!');//or JsBarcode("#canvascode", "Hello world!");
$("#imgcode").JsBarcode("I'm huangenai!");//or JsBarcode("#imgcode", "I'm bwju!");
</script>
</body>
</html>
VFP后端生成一维和二维码图片供前端显示
VFP后端使用foxbarcodeqr生成二维码
猫猫在这是是生成了图
m.loFbc = newobject("FoxBarcodeQR","FoxBarcodeQR.prg")
m.lcQRImage = m.loFbc.QRBarcodeImage("123456","QR.png" , 6, 2)
VFP后端使用foxbarcode生成一维码
SET PROCEDURE TO Foxbarcode, gpImage2 ADDITIVE
* 生成一个Code 128的条码对象
loInStock = CREATEOBJECT("FoxBarCode")
loInStock.nBarCodeType = 110 && Code 128
loInStock.nFactor = 1
loInStock.nImageHeight = 60 && in pixels
loInStock.nFontSize = 16 &&字体尺寸
loInStock.lFontBold = .T. &&字体是否加粗
loInStock.nAlignText = 1 &&排列0=靠左，1=居中，2=靠右
loInStock.lShowHumanReadableText =.f. &&不显示下方文字
loInStock.cImageType = IIF(VERSION(5) > 600, "PNG", "JPG") &&图片文件类型
loInStock.barcodeimage(cmycode,"ywcode.png")
前端页面引用这个图片 vue前端框架 插入一个img标签，绑定一下scr属性
<img :src="ywcode" alt="" style="width:100%;height:100px" >
<img :src="qrcode" alt="" style="width:200px">
that.qrcode="hyimg/"+odata.rows[0].kh_sj+","+odata.rows[0].hy_kh+"QR.png"; that.ywcode="hyimg/"+odata.rows[0].kh_sj+","+odata.rows[0].hy_kh+".png";
因为每个用户的ID是唯一的，所以生成的图片其实也是唯一的，所以二维码图片只需要生成一次，那么大家想好的怎么只生成一次。 后端生成图片的方案，图片是存放在后端服务器上的，如果用户量大，可以将图片托管到腾迅云、阿里云、七牛云,用上CDN加速，那加速效果杠杠的。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2021-12-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。