其他分享
首页 > 其他分享> > 公众号H5网页中显示用户二维码,VFP做起来也不难,二套方案都可以

公众号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”公众号,发送“二维码”三个字,即可以获取。

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