首页 > 其他分享> 文章详细

公众号H5网页中显示用户二维码，VFP做起来也不难，二套方案都可以

2021-12-06 16:31:37 阅读：153 来源： 互联网

标签：loInStock JsBarcode 生成二维码 && 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加速，那加速效果杠杠的。

本文所用的库和代码，可以关注“加菲猫的VFP”公众号，发送“二维码”三个字，即可以获取。

标签：loInStock,JsBarcode,生成,二维码,&&,H5,VFP
来源： https://www.cnblogs.com/fitche/p/15650468.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。