收到需求要生成二維碼的時候剛進專案組不久，接觸vue也才一兩個星期，還處於懵逼狀態。

　　本小白的第一反應就是百度二維碼的生成方法，網上有很多大神給出解決方案，最開始本小白以為是在後臺生成圖片然後傳到前臺頁面，後來發現可以直接在前端用js生成，網上查到的大部分都是用jquery.qrcode.js配合utf.js(為了支援中文)和 jquery-1.8.0.js來實現，親測可行(但本白只在原生HTML中實現，vue中死活報錯：“找不到qrcode方法”，是不是本小白沒找準姿勢，哪位大神求告知！)如下圖：

這是生成出來的二維碼：

　　到這裡問題還是沒有解決，於是又繼續找，發現一位

附上程式碼：

 1 <template>
 2     <el-dialog :width= "dlgWidth" :title="title" :visible.sync="visible" :close-on-click-modal="false" @close="closePanel">
 3
 
       <div id="qrcodeId" style="width: 200px; height: 250px; margin-left:70px; margin-top:30px">
 4             <vue-qr :text="config.value" :logoSrc="config.imagePath" :size="200" :margin="0"></vue-qr>
 5         </div>
 6     </el-dialog>
 7 </template>
 8 
 9 <script>
10
 
 import VueQr from 'vue-qr'
11 
12 export default {
13     components: { VueQr },
14     props: ["show"],
15   data() {
16     return {
17             title: "掃描二維碼下載APP",
18             visible: this.show,
19             dlgWidth: _const.POPWND_SMALL_WIDTH,
20             config: {
21           value: '',//顯示的值、跳轉的地址
22           imagePath: require('@/images/logo.png')//中間logo的地址
23         }
24     };
25     },
26     methods: {
27         initQRCode(qrcodeUrl) {
28             this.config.value = qrcodeUrl;
29         },
30    closePanel()
31    {
32     this.$emit('update:show',false);
33    }
34     },
35   watch: {
36     show(val) {
37       this.visible = val;
38     }
39   }
40 }
41 </script>

呼叫上面的元件：

父頁面中觸發二維碼生成現實的方法：

滿心歡喜寫完了，結果二維碼根本沒出來，按照大神的部落格裡說的去掉logSrc確實可以生成出二維碼，但是圖片的問題依然沒解決，一開始以為是路徑問題，換了幾個圖片突然成功了，於是本小白又按照同樣的方式將目標圖片路徑放進去，結果還是不行，但是後來發現同一個資料夾裡的另外一個圖片可以顯示出來，又試了幾個其他圖片，也是有的能顯示有的不能，我就開始懷疑是不是圖片大小有要求，連續用大小不同的圖片嘗試多次後，我肯定了這個猜想，經過多次測試，發現這個臨界值在10000位元組左右，只能顯示10000位元組以內的圖片。

　　問題找到了，現在只能將目標圖片壓縮一下，找了個網站壓縮後圖片的效果跟原圖很接近，連續壓縮了好幾遍才達到要求，這裡是本白壓縮圖片的網站，大神們有其他更好更便捷的網站可以分享一下嘛？3Q。

　　純小白，若有錯誤，歡迎大神批評指點！！！明天還要加班，洗洗睡了，狗命要緊！