1. Demanda: Permita que los usuarios experimenten rápidamente el maravilloso contenido compartido rápidamente (en forma de código QR).
2. Análisis: Pila de tecnología
- .Familiarizado con em, rem, diseño de terminal móvil flexible
- Maestro nativo Javascipt
- Domina el marco principal de front-end Vue
- Domina el método de solicitud axios
- Biblioteca de componentes Vant
- paquete npm de nodo
3. Proceso:
1、点击分享按钮
2、获取到地址栏id
3、展示到页面
4. Análisis específico del proyecto
1. Haga clic en evento
Vue haga clic en evento @ clic
! [Inserte la descripción de la imagen aquí] (https://img-blog.csdnimg.cn/20200828202638107.png#pic_center
2. Diseño simple con biblioteca de componentes 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. El valor de los datos
show: false,
imrUrl: ""
4. Descargue el complemento del sitio web oficial de npm.js para generar el desmontaje del código QR. La
dirección detallada del complemento: https://www.npmjs.com/package/qrcode
npm install --save qrcode
5. Utilice (sitio web oficial)
import QRCode from 'qrcode' //那使用哪用
// With promises
QRCode.toDataURL('I am a pony!')
.then(url => {
console.log(url)
})
.catch(err => {
console.error(err)
})
6. El código específico del método de evento de clic.
// 点击分享
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);
});
},