前言
我們借用了qrcode.js插件，這個(gè)插件可以幫助我們生成二維碼，超簡(jiǎn)單超好用
下面是我生成了一個(gè)主頁(yè)的二維碼，大家可以掃碼查看效果
插件引入
1.本地文件引入
本地引入依賴包地址：下載地址
?1.首先引入插件，這里我是script標(biāo)簽引入的，如果用vue直接全局引入即可
<script type="text/javascript" src="/js/qrcodejs-master/qrcode.js"></script>
2.npm方式引入
2.1控制臺(tái)輸入指令
npm install --save qrcodejs2-fix2.2vue中引入
import QRCode from 'qrcodejs2-fix'操作步驟
1.準(zhǔn)備一個(gè)存放二維碼的盒子
原生中使用ID綁定，VUE中使用ref綁定
<div id="qrCodeUrl"></div> //html中使用ID綁定
<div ref="qrcode"> //vue中只需要綁定一個(gè)ref值即可
</div>2.js調(diào)用并且存放內(nèi)容
這里是先把盒子為空了，然后再去調(diào)用方法生成二維碼? text就是你的二維碼內(nèi)容：可以是一段文字，也可以是一個(gè)連接，這里我用的是連接，掃碼后直接跳轉(zhuǎn)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-855349.html
下面分別是原生和vue的調(diào)用方式文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-855349.html
// html js
document.getElementById("qrCodeUrl").innerHTML = "";
let qrCodeUrl = new QRCode("qrCodeUrl", {
width: 200,
height: 200,
text: this.originUrl, //二維碼內(nèi)容，可以是一個(gè)連接或者單純的一段文字
});// vue
new QRCode(this.$refs.qrcode, {
text: qrCodeUrl, //URL地址
width: 300,
height: 300,
colorDark: '#000', //二維碼顏色
colorLight: "#ffffff" //背景顏色
});到了這里，關(guān)于純前端實(shí)現(xiàn)二維碼生成(原生/vue方法)（超簡(jiǎn)單）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
