一、需求:让用户快速体验快速分享的精彩内容(以二维码的形式)
二、分析:技术栈
- .熟练em、rem、flex移动端布局
- 掌握原生Javascipt
- 掌握前端主流框架Vue
- 掌握axios请求方式
- 组件库Vant
- node npm包
三、流程:
1、点击分享按钮
2、获取到地址栏id
3、展示到页面
四、项目具体分析
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、data里面的值
show: false,
imrUrl: ""
4、从npm.js官网下载插件生成二维码的拆件
插件详细地址: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);
});
},