Vue realizes path conversion to QR code, and uses mobile phone to scan code to download APP

Table of contents

1. Install the qrcodejs2 plugin

2. Imported into the page

3. Fill in the page

4. Called in the page

5. Complete code

6. Final effect

---

Today, the team leader asked me to scan a QR code to download a function of the APP. I also referred to some ideas of other technology giants on the Internet, so I wrote this article only to record my own learning, and finally there are complete codes and effects picture.

1. Install the qrcodejs2 plugin

npm install qrcodejs2 --save

2. Imported into the page

import QRCode from 'qrcodejs2';

components:{QRCode}

3. Fill in the page

Here I click the button to display the QR code in the pop-up box. If you don’t need the pop-up box, just a div is fine, and you can change it according to your needs.

<div>
    <el-button type="text" @click="dialogFormVisible = true">APP下载</el-button>

    <el-dialog title="客户端下载" :visible.sync="dialogFormVisible" @opened="loadRQCode">
      <div id="jbox-content" class="jbox-content" style="height:311px;overflow:hidden;overflow-y:auto;">
          <div style="text-align:center;color:red;padding:10px;">
              注：当前仅支持Android客户端使用<br>
          </div>
          <div id="qrcode" ref="qrcode" style="display: flex;justify-content: center"></div>
          <div style="text-align: center;padding:10px; ">
              <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
          </div>
      </div>
    </el-dialog>
</div>

 4. Called in the page

data(){
    return{
      isLoaded: false,
      dialogFormVisible: false
    }
},
methods:{
    loadRQCode() {
        if(!this.isLoaded) {
            request({
              url: '/appInfo/androidApk',
              method: 'get'
            }).then((res)=>{
              new QRCode('qrcode',{
                width: 200,
                height: 200,
                text: res.msg
              })
              this.isLoaded = true;
            })
        }
    }
}

 5. Complete code

<template>
    <div>
        <el-button type="text" @click="dialogFormVisible = true">APP下载</el-button>

        <el-dialog title="客户端下载" :visible.sync="dialogFormVisible" @opened="loadRQCode">
          <div id="jbox-content" class="jbox-content" style="height:311px;overflow:hidden;overflow-y:auto;">
              <div style="text-align:center;color:red;padding:10px;">
                  注：当前仅支持Android客户端使用<br>
              </div>
              <div id="qrcode" ref="qrcode" style="display: flex;justify-content: center"></div>
              <div style="text-align: center;padding:10px; ">
                  <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
              </div>
          </div>
        </el-dialog>
    </div>
</template>

import request from "@/utils/request";
import QRCode from 'qrcodejs2';

export default {
  name: "",
  components:{QRCode},
  data(){
    return{
      isLoaded: false,
      dialogFormVisible: false
    }
  },
  methods:{
    loadRQCode() {
      if(!this.isLoaded) {
        request({
          url: '/appInfo/androidApk',
          method: 'get'
        }).then((res)=>{
          new QRCode('qrcode',{
            width: 200,
            height: 200,
            text: res.msg
          })
          this.isLoaded = true;
        })
      }
    }
  }

Note:
1. The above method of request is that the background controller wrote a method to obtain the Android download path configured in application.yml, so I use the request to request the background method to get the path I want. If this is not necessary, Write directly like this:

new QRCode('qrcode',{ 
  width: 200, 
  height: 200, 
  text: 'The download path you want to use' 
});

2. Due to the form of the pop-up box I used, using @opened to trigger the formation of the QR code will result in adding a QR code after only one pop-up box, so I use a global variable of isLoaded to judge;
3. If the formed QR code is scanned by WeChat QQ, it will be prompted to open it in the browser by default, because none of them can directly open the URL.

6. Final effect

 

That's all for the above learning records, bye!

Description: Learning records, if there are mistakes, please correct me, if you have any questions, welcome to comment