I. Requirement: Let users quickly experience and share wonderful content (in the form of TWO-DIMENSIONAL code)

Analysis: Technology stack

  1. Proficient in EM, REM, Flex mobile terminal layout
  2. Master native javascript
  3. Master the mainstream front-end framework Vue
  4. Master axios requests
  5. Component library Vant
  6. The node NPM package

Iii. Process:

1. Click the "Share" button. 2Copy the code

Iv. Specific project analysis

1. Click eventsVue click event @click

! [insert picture description here] (img – blog. Csdnimg. Cn / 20200828202… Simple layout with component library Vant

<! -- QR code --><van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="block">
          <p>share</p>
          <div>
            <img :src="imrUrl" />
          </div>
        </div>
      </div>
    </van-overlay>
Copy the code

3. The value in data

show: false.imrUrl: ""
Copy the code

4, from the NPM. Js’s official website to download the plugin generated qr code piecemeal plug-in detailed address: www.npmjs.com/package/qrc…

npm install --save qrcode
Copy the code

5. Use (official website)

import QRCode from 'qrcode'  // What is the use of that

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

6, click the event method specific code

 // Click Share
    share() {
      this.show = true;
      let url = location.href;// Get the current address bar address
      console.log(url);
      QRCode.toDataURL(url)
        .then(tpian= > {
          console.log(tpian);
          this.imrUrl = tpian;
        })
        .catch(err= > {
          console.error(err);
        });
    },
Copy the code

Six, achieve the effect

Conclusion: User experience first, can not stop the pace of our development