I. Requirement: Let users quickly experience and share wonderful content (in the form of TWO-DIMENSIONAL code)
Analysis: Technology stack
- Proficient in EM, REM, Flex mobile terminal layout
- Master native javascript
- Master the mainstream front-end framework Vue
- Master axios requests
- Component library Vant
- The node NPM package
Iii. Process:
1. Click the "Share" button. 2Copy the code
Iv. Specific project analysis
1. Click eventsVue click event @click
! [insert picture description here] (img – blog. Csdnimg. Cn / 20200828202… Simple layout with component library Vant
<! -- QR code --><van-overlay :show="show" @click="show = false">
<div class="wrapper">
<div class="block">
<p>share</p>
<div>
<img :src="imrUrl" />
</div>
</div>
</div>
</van-overlay>
Copy the code
3. The value in data
show: false.imrUrl: ""
Copy the code
4, from the NPM. Js’s official website to download the plugin generated qr code piecemeal plug-in detailed address: www.npmjs.com/package/qrc…
npm install --save qrcode
Copy the code
5. Use (official website)
import QRCode from 'qrcode' // What is the use of that
// With promises
QRCode.toDataURL('I am a pony! ')
.then(url= > {
console.log(url)
})
.catch(err= > {
console.error(err)
})
Copy the code
6, click the event method specific code
// Click Share
share() {
this.show = true;
let url = location.href;// Get the current address bar address
console.log(url);
QRCode.toDataURL(url)
.then(tpian= > {
console.log(tpian);
this.imrUrl = tpian;
})
.catch(err= > {
console.error(err);
});
},
Copy the code