前端怎樣寫APP的分享二維碼的功能

1、需求：讓用戶快速體驗快速分享的精彩內容（以二維碼的形式）

2、分析：技術棧

1. .熟練em、rem、flex移動端佈局
2. 掌握原生Javascipt
3. 掌握前端主流框架Vue
4. 掌握axios請求方式
5. 組件庫Vant
6. node npm包

3、流程：

一、點擊分享按鈕
二、獲取到地址欄id
三、展現到頁面
複製代碼

4、項目具體分析

一、點擊事件 Vue點擊事件@click

![在這裏插入圖片描述](img-blog.csdnimg.cn/20200828202… 二、 用組件庫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>
複製代碼

三、data裏面的值

show: false,
imrUrl: ""
複製代碼

四、從npm.js官網下載插件生成二維碼的拆件 插件詳細地址：www.npmjs.com/package/qrc…

npm install --save qrcode
複製代碼

五、使用（官網）

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

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

六、點擊事件的方法具體代碼

// 點擊分享
    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);
        });
    },
複製代碼

6、實現效果

總結：用戶體驗至上，阻擋不住咱們開發的步伐