pc和h5生成二维码跳转到微信小程序

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就可以(&参数名=值)

注意:开发环境每测试一条不同参数的二维码,都需要在测试链接里面添加一条新的,目前只能存在五条测试链接,当然是可以删除重新添加的喔。

到上线的时候建议先发一版测试,别忘配置二维码跳转规则,先测一下,正常情况下是可以动态跳转的。

如果有帮助到你,可以给我一颗小心心吗~

猜你喜欢

转载自blog.csdn.net/weixin_38791717/article/details/109999104