前端怎样写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、实现效果

总结：用户体验至上，阻挡不住咱们开发的步伐