快捷導(dǎo)航

Vue 微信端掃描二維碼蘋果端卻只能保存圖片問(wèn)題(解決方法)

更新時(shí)間：2020年01月19日 09:03:40 作者：三里清風(fēng)

這幾天在做項(xiàng)目時(shí)遇到微信掃描二維碼的然后進(jìn)入公眾號(hào)網(wǎng)頁(yè)巴拉巴拉的，然后就很順利的遇到了在安卓端掃碼的時(shí)候，順利的一塌糊涂，然后到了蘋果端的時(shí)候，就只能出現(xiàn)一個(gè)保存圖片，然后就寫一下記錄一下這問(wèn)題的解決方法

這幾天做個(gè)了項(xiàng)。就是微信掃描二維碼的然后進(jìn)入公眾號(hào)網(wǎng)頁(yè)巴拉巴拉的，然后就很順利的遇到了在安卓端掃碼的時(shí)候，順利的一塌糊涂，然后到了蘋果端的時(shí)候，就只能出現(xiàn)一個(gè)保存圖片，然后就寫一下記錄一下這問(wèn)題的解決方法。

問(wèn)題

機(jī)型：iphone 7p

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

然后是正常情況下。當(dāng)我們開(kāi)始掃碼的時(shí)，應(yīng)該是這個(gè)樣子

這個(gè)是正常的，但是在蘋果端的時(shí)候就懵了，下面的菜單就只有一個(gè)保存圖片。那么如何解決呢，請(qǐng)看下面。

解決方案

解決方案其實(shí)有兩種。

使用 qrcodeJs 就不做介紹了，官網(wǎng)應(yīng)有盡有，也就是將二維碼的鏈接填寫進(jìn)繪制的 canvas 里面，然后生成二維碼掃描。

附上github地址: qrcodejs

使用ａ標(biāo)簽進(jìn)行跳轉(zhuǎn)
使用 a 標(biāo)簽進(jìn)行跳轉(zhuǎn)這個(gè)應(yīng)該沒(méi)什人有疑問(wèn)怎么做了，也就是幾行代碼的事情

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

這個(gè)在項(xiàng)目?jī)?nèi)的時(shí)候呢，確實(shí)是可以解決問(wèn)題的，但如果從外部帶參數(shù)進(jìn)入網(wǎng)頁(yè)，例如有人分享了一個(gè)二維碼給我，然后讓我去掃碼的時(shí)候呢？他就不行了。然后經(jīng)過(guò)我?guī)状螠y(cè)試之后，我發(fā)現(xiàn)了問(wèn)題

// 第一次跳轉(zhuǎn)的時(shí)候，也就是進(jìn)入頁(yè)面的時(shí)候，url是這樣的
http://dududev.huikaoedu.com/invite?qrcode=https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=xxxx

然后這個(gè)時(shí)候呢，他是無(wú)法掃碼的，只能保存到本地，但是我又想起之前在百度看見(jiàn)一個(gè)很奇葩的解決方式，刷新頁(yè)面，說(shuō)是刷新頁(yè)面就可以了，然后在我堅(jiān)持不懈的刷新了兩以后，我發(fā)現(xiàn)我的url變成了下面這樣子

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

沒(méi)錯(cuò)，他進(jìn)行了編碼?。。。。。。∷宰罱K的方案就是，如果你發(fā)現(xiàn)使用了 a 標(biāo)簽沒(méi)用，那么就要進(jìn)行 encodeURIComponent() 編碼，具體就是這樣了

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

總結(jié)

以上所述是小編給大家介紹的V的ue 微信端掃描二維碼蘋果端只能保存圖片解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: