프런트 엔드에 QR 코드 공유 기능을 작성하는 방법

1. 수요 : 사용자가 빠르게 공유 한 멋진 콘텐츠 (QR 코드 형태)를 빠르게 경험할 수 있습니다.

2. 분석 : 기술 스택

1. .em, rem, flex 모바일 단말기 레이아웃에 익숙 함
2. 마스터 네이티브 Javascipt
3. 주류 프런트 엔드 프레임 워크 마스터 Vue
4. axios 요청 방법 마스터
5. 컴포넌트 라이브러리 Vant
6. 노드 npm 패키지

3. 프로세스 :

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

4. 프로젝트 별 분석

1. 클릭 이벤트
Vue 클릭 이벤트 @click

! [여기에 사진 설명 삽입] (https://img-blog.csdnimg.cn/20200828202638107.png#pic_center
2. 구성 요소 라이브러리 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. 데이터의 가치

show: false,
imrUrl: ""

4. npm.js 공식 웹 사이트에서 플러그인을 다운로드하여 QR 코드 디스 어셈블리 생성
플러그인 상세 주소 : https://www.npmjs.com/package/qrcode

npm install --save qrcode

5. 이용 (공식 홈페이지)

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

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

6. 클릭 이벤트 메소드의 특정 코드

 // 点击分享
    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);
        });
    },

여섯, 효과 달성

요약 : 사용자 경험이 가장 중요하며 개발을 중단 할 수 없습니다.

그룹 번호 : 954314851 또는 QR 코드를 스캔하여 그룹에 입장하세요.