Vue 微信端掃描二維碼，蘋果端只能保存圖片解決方法

前言

這幾天作個了項。就是微信掃描二維碼的而後進入公衆號網頁巴拉巴拉的，而後就很順利的遇到了在安卓端掃碼的時候，順利的一塌糊塗，而後到了蘋果端的時候，就只能出現一個保存圖片，而後就寫一下記錄一下這問題的解決方法。

問題

• 機型：iphone 7p

這裏的二維碼是一張圖片，微信返回的圖片,具體下圖

而後是正常狀況下。當咱們開始掃碼的時，應該是這個樣子

這個是正常的，可是在蘋果端的時候就懵了，下面的菜單就只有一個保存圖片。那麼如何解決呢，請看下面。

解決方案

解決方案其實有兩種。

• 使用qrcodeJs繪製
• 直接使用a標籤進行跳轉

使用qrcodeJs就不作介紹了，官網應有盡有，也就是將二維碼的連接填寫進繪製的canvas裏面，而後生成二維碼掃描。
附上github地址:qrcodejs

使用ａ標籤進行跳轉

使用a標籤進行跳轉這個應該沒什人有疑問怎麼作了，也就是幾行代碼的事情

let a = document.createElement("a");
a.href = `${window.location.origin}/invite?qrcode=${qrcode}`;
a.click();
複製代碼

這個在項目內的時候呢，確實是能夠解決問題的，但若是從外部帶參數進入網頁，例若有人分享了一個二維碼給我，而後讓我去掃碼的時候呢？ 他就不行了。而後通過我幾回測試以後，我發現了問題

// 第一次跳轉的時候，也就是進入頁面的時候，url是這樣的
http://dududev.huikaoedu.com/invite?qrcode=https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=xxxx
複製代碼

而後這個時候呢，他是沒法掃碼的，只能保存到本地，可是我又想起以前在百度看見一個很奇葩的解決方式，刷新頁面，說是刷新頁面就能夠了，而後在我堅持不懈的刷新了兩之後，我發現個人url變成了下面這樣子

http://dududev.huikaoedu.com/invite?qrcode=https%3A%2F%2Fmp.weixin.qq.com%2Fcgi-bin%2Fshowqrcode%3Fticket%xxx
複製代碼

沒錯，他進行了編碼！！！！！！！因此最終的方案就是，若是你發現使用了a標籤沒用，那麼就要進行encodeURIComponent()編碼，具體就是這樣了

let a = document.createElement("a");
const qrcode = encodeURIComponent(this.$route.query.qrcode);
a.href = `${window.location.origin}/invite?qrcode=${qrcode}`;
a.click();
複製代碼

而後，完美解決，皆大歡喜。