PC and h5 generate QR code to jump to WeChat applet
First use qrcode to generate a QR code, bind the corresponding link, and introduce the qrcode plug-in respectively.
pc:
<div class="codeDes">微信扫描二维码跳转</div>
<div id="qrcode"></div>$('#qrcode').qrcode({width: 64,height: 64,correctLevel:0,text: "https://wap.BalleMax.com/miniprogram?action=go&customerNo="+that.customerNo+"&orderId="+that.orderId+"&apexId="+that.apexId});
//动态绑定对应二维码
H5:
<div class="recommendedNumber">长按或保存二维码</div>
<div class="qrCode">
<vue-qr
:size="300"
class="erweima"
:text="appSrc">
</vue-qr>
</div> // 拼接网址。
spellUrl() {
//todo 生产环境改为https
this.appSrc = "https://wap.BalleMax.com/miniprogram?action=go&customerNo="+this.customerNo+"&orderId="+this.orderId+"&apexId="+this.apexId;
console.log("paths: " + this.appSrc)
}As shown above, the QR code and parameters have been generated, but it should be noted that if you want the QR code to be correct for the mini program, you must configure the corresponding parameters on the WeChat public platform:
If you want to transfer parameters dynamically, you must follow the original link https://wap.BalleMax.com/ followed by miniprogram?action=go (I took it casually here, you can also aaa?bb=c ) and then connect again For the required parameters, just use &customerNo=111&orderId=222 (¶meter name=value)
Note: Every time the development environment tests a QR code with different parameters, a new one needs to be added to the test link. Currently, there are only five test links. Of course, they can be deleted and re-added.
When going online, it is recommended to release a version for testing first. Don’t forget to configure the QR code jump rules and test it first. Under normal circumstances, it can jump dynamically.
If it helps you, can you give me a little heart~