1. 程式人生 > 實用技巧 >PC端生成二維碼,微信掃碼 帶引數跳轉微信小程式指定頁面

PC端生成二維碼,微信掃碼 帶引數跳轉微信小程式指定頁面

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
    })

  },

到這裡就算完成了