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就能夠（&參數名=值）

注意：開發環境每測試一條不一樣參數的二維碼，都須要在測試連接裏面添加一條新的，目前只能存在五條測試連接，固然是能夠刪除從新添加的喔。

到上線的時候建議先發一版測試，別忘配置二維碼跳轉規則，先測一下，正常狀況下是能夠動態跳轉的。

若是有幫助到你，能夠給我一顆當心心嗎~