PC端生成二維碼,微信掃碼 帶引數跳轉微信小程式指定頁面
阿新 • • 發佈:2020-09-18
1、首先在 登入 微信公眾號-小程式-開發-開發設定 找到 ‘掃普通連結二維碼開啟小程式’,然後新增配置。
2、配置成功後,在PC端寫一個按鈕,點選按鈕根據連結與引數生成二維碼圖片
<button type="default" @click="transmit">點選生成二維碼</button> <div class="erweima" id="qrcode" ref="qrcode"></div>
3、連結生成二維碼使用的是qrcodejs2,需要安裝並引入,同時引入jquery
npm install qrcodejs2 --save
import QRCode from "qrcodejs2";
import $ from "jquery"
4、JS 中
methods: { transmit(){ if (this.$refs.qrcode.title != '') { $('#qrcode').html("") }this.qrcode('小紅', 18); }, qrcode(e, n) { let qrcode = new QRCode("qrcode", { width:200, // 二維碼寬度,單位畫素 height: 200, // 二維碼高度,單位畫素 text: "https://api.zhiyedang.cn/a?=" + e + "&" + n // 生成二維碼的連結 }); }, }
到這裡,點選按鈕就能生成二維碼了,用微信掃二維碼也能跳到小程式指定頁面了
注意(這個功能預設跳轉到線上的小程式,如果想要跳轉到體驗版,第一步 測試連結裡面的二維碼規則,和PC端二維碼連結的格式需要一致,否則跳進去報錯400)
微信小程式中
app.js 中
onLaunch: function() { var that = this ; if(JSON.stringify(options.referrerInfo)!='{}'){ that.globalData.name=options.referrerInfo.extraData.name; that.globalData.age=options.referrerInfo.extraData.age; } },
globalData: { name:'', age:'', }
掃描後跳轉的小程式頁面中 獲取引數
data: { name: '', age: '' },
onLoad: function (options) { var name var age if (JSON.stringify(options)=='{}') { name = app.globalData.name age = app.globalData.age this.setData({ name: name, age: age }) return } let url = decodeURIComponent(options.q) let data = url.split('=')[1] name = data.split('&')[0] age = data.split('&')[1] this.setData({ name: name, age: age }) },
到這裡就算完成了