How to write the function of sharing the QR code on the front end

1. Demand: Let users quickly experience the wonderful content quickly shared (in the form of a QR code)

2. Analysis: Technology Stack

1. .Familiar with em, rem, flex mobile terminal layout
2. Master native Javascipt
3. Master the mainstream front-end framework Vue
4. Master the axios request method
5. Component library Vant
6. node npm package

3. Process:

1、点击分享按钮
2、获取到地址栏id
3、展示到页面

4. Project specific analysis

1. Click event
Vue click event @click

![Insert picture description here](https://img-blog.csdnimg.cn/20200828202638107.png#pic_center
2. Simple layout with component library Vant

<!-- 二维码 -->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="block">
          <p>分享</p>
          <div>
            <img :src="imrUrl" />
          </div>
        </div>
      </div>
    </van-overlay>

3. The value in data

show: false,
imrUrl: ""

4. Download the plug-in from the official website of npm.js to generate the disassembly of the QR code. The
detailed address of the plug-in: https://www.npmjs.com/package/qrcode

npm install --save qrcode

5. Use (official website)

import QRCode from 'qrcode'  //那使用哪用

// With promises
QRCode.toDataURL('I am a pony!')
  .then(url => {
    
    
    console.log(url)
  })
  .catch(err => {
    
    
    console.error(err)
  })

6. The specific code of the click event method

 // 点击分享
    share() {
    
    
      this.show = true;
      let url = location.href;//获取当前地址栏的地址
      console.log(url);
      QRCode.toDataURL(url)
        .then(tpian => {
    
    
          console.log(tpian);
          this.imrUrl = tpian;
        })
        .catch(err => {
    
    
          console.error(err);
        });
    },

Six, achieve the effect

Summary: User experience is paramount and cannot stop our development

Group number: 954314851 or scan the QR code to enter the group, looking forward to everyone joining