公眾號H5網頁中顯示使用者二維碼，VFP做起來也不難，二套方案都可以
阿新 • • 發佈：2021-12-06
社群裡面的劉總有一套超市管理系統，現在想要將使用者的餘額和積分顯示出來，方案是採用微信公眾號的方式，然後我就讓美工做了一個設計圖
.
其中二維碼和一維碼的顯示方案其實值得討論一下
- 方案一：前端顯示
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”公眾號，傳送“二維碼”三個字，即可以獲取。
VFP祺佑三層開發框架，是VFP界第一款可以應用於開發CS、BS、APP、小程式、公眾號的全功能開發框架。瞭解更多，請訪問http://www.sn58.cn