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

社群里面的刘总有一套超市管理系统，现在想要将用户的余额和积分显示出来，方案是采用微信公众号的方式，然后我就让美工做了一个设计图
会员中心.

其中二维码和一维码的显示方案其实值得讨论一下

  1. 方案一：前端显示
    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”公众号，发送“二维码”三个字，即可以获取。

posted @ 2021-12-06 16:25  加菲猫的VFP  阅读(356)  评论(0)  编辑  收藏  举报