pc和h5生成二维码跳转到微信小程序
先使用qrcode生成二维码,绑定对应链接,分别引入qrcode插件
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)
}
像上面这样二维码和参数都是生成好了,但是要注意,想让二维码正确小程序,必须在微信公众平台配置对应参数:
如果想动态传参,必须要在https://wap.BalleMax.com/原链接后面跟随miniprogram?action=go(这里我是随便取的,你也可以aaa?bb=c)然后将再连接之后需要的参数,使用&customerNo=111&orderId=222就可以(&参数名=值)
注意:开发环境每测试一条不同参数的二维码,都需要在测试链接里面添加一条新的,目前只能存在五条测试链接,当然是可以删除重新添加的喔。
到上线的时候建议先发一版测试,别忘配置二维码跳转规则,先测一下,正常情况下是可以动态跳转的。
如果有帮助到你,可以给我一颗小心心吗~