Comment écrire la fonction de partage du code QR sur le front-end

1. Demande: laissez les utilisateurs découvrir rapidement le merveilleux contenu rapidement partagé (sous la forme d'un code QR)

2. Analyse: pile technologique

1. .Familiar avec em, rem, flex disposition des terminaux mobiles
2. Maître Javascipt natif
3. Maîtrisez le framework frontal grand public Vue
4. Maîtriser la méthode de requête axios
5. Bibliothèque de composants Vant
6. package npm de nœud

3. Processus:

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

4. Analyse spécifique au projet

1. Cliquez sur l'événement
Vue cliquez sur l'événement @click

! [Insérer la description de l'image ici] (https://img-blog.csdnimg.cn/20200828202638107.png#pic_center
2. Mise en page simple avec la bibliothèque de composants 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. La valeur des données

show: false,
imrUrl: ""

4. Téléchargez le plug-in depuis le site officiel de npm.js pour générer le désassemblage du code QR L'
adresse détaillée du plug-in: https://www.npmjs.com/package/qrcode

npm install --save qrcode

5. Utilisation (site officiel)

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

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

6. Le code spécifique de la méthode d'événement click

 // 点击分享
    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, obtenez l'effet

Résumé: l'expérience utilisateur est primordiale et ne peut pas arrêter notre développement

Numéro de groupe: 954314851 ou scannez le code QR pour entrer dans le groupe, dans l'attente de la participation de tous