1. 程式人生 > 程式設計 >Vue 微信端掃描二維碼蘋果端卻只能儲存圖片問題(解決方法)

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

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

問題

機型:iphone 7p

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

然後是正常情況下。當我們開始掃碼的時,應該是這個樣子

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

解決方案

解決方案其實有兩種。

使用 qrcodeJs 就不做介紹了,官網應有盡有,也就是將二維碼的連結填寫進繪製的 canvas 裡面,然後生成二維碼掃描。

附上github地址: qrcodejs

  • 使用a標籤進行跳轉
  • 使用 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();

總結

以上所述是小編給大家介紹的V的ue 微信端掃描二維碼蘋果端只能儲存圖片解決方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對我們網站的支援!
如果你覺得本文對你有幫助,歡迎轉載,煩請註明出處,謝謝!