Vue 微信端掃描二維碼蘋果端卻只能保存圖片問題(解決方法)
這幾天做個了項。就是微信掃描二維碼的然后進入公眾號網(wǎng)頁巴拉巴拉的，然后就很順利的遇到了在安卓端掃碼的時候，順利的一塌糊涂，然后到了蘋果端的時候，就只能出現(xiàn)一個保存圖片，然后就寫一下記錄一下這問題的解決方法。
問題
機型：iphone 7p
這里的二維碼是一張圖片，微信返回的圖片,具體下圖
然后是正常情況下。當我們開始掃碼的時，應該是這個樣子
這個是正常的，但是在蘋果端的時候就懵了，下面的菜單就只有一個保存圖片。那么如何解決呢，請看下面。
解決方案
解決方案其實有兩種。
使用 qrcodeJs 就不做介紹了，官網(wǎng)應有盡有，也就是將二維碼的鏈接填寫進繪制的 canvas 里面，然后生成二維碼掃描。
附上github地址: qrcodejs
- 使用ａ標簽進行跳轉(zhuǎn)
- 使用 a 標簽進行跳轉(zhuǎn)這個應該沒什人有疑問怎么做了，也就是幾行代碼的事情
let a = document.createElement("a");
a.href = `${window.location.origin}/invite?qrcode=${qrcode}`;
a.click();
這個在項目內(nèi)的時候呢，確實是可以解決問題的，但如果從外部帶參數(shù)進入網(wǎng)頁，例如有人分享了一個二維碼給我，然后讓我去掃碼的時候呢？ 他就不行了。然后經(jīng)過我?guī)状螠y試之后，我發(fā)現(xiàn)了問題
// 第一次跳轉(zhuǎn)的時候，也就是進入頁面的時候，url是這樣的
http://dududev.huikaoedu.com/invite?qrcode=https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=xxxx
然后這個時候呢，他是無法掃碼的，只能保存到本地，但是我又想起之前在百度看見一個很奇葩的解決方式，刷新頁面，說是刷新頁面就可以了，然后在我堅持不懈的刷新了兩以后，我發(fā)現(xiàn)我的url變成了下面這樣子
沒錯，他進行了編碼?。。。。。。∷宰罱K的方案就是，如果你發(fā)現(xiàn)使用了 a 標簽沒用，那么就要進行 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 微信端掃描二維碼蘋果端只能保存圖片解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
vue跳轉(zhuǎn)頁面攜帶參數(shù)并且立即執(zhí)行方法
這篇文章主要介紹了vue跳轉(zhuǎn)頁面攜帶參數(shù)并且立即執(zhí)行方法,首先定義跳轉(zhuǎn)函數(shù),結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2023-10-10
因為安裝原型圖設計實現(xiàn)頁面,在element自帶的圖標庫好像沒有,所以按鈕的圖標icon需要自定義,下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標的兩種解決方式,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue3的自定義hook函數(shù)使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vuejs對接后端踩過的坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要為大家詳細介紹了使用Vue實現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了自定義input組件如何實現(xiàn)拖拽文件上傳問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
我們都知道Electron項目分為了主進程和渲染進程,主進程其實就是我們的Electron,渲染進程就相當于我們的Vue項目,下面這篇文章主要給大家介紹了關(guān)于vue項目使用electron進行打包操作的全過程,需要的朋友可以參考下2023-03-03
vue中過濾器的作用可被用于一些常見的文本格式化,也就是修飾文本,但是文本內(nèi)容不會改變,下面這篇文章主要給大家介紹了關(guān)于VUE中filters過濾器的兩種用法,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue中v-text / v-html使用實例代碼詳解,非常不錯，代碼簡單易懂，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue組件代碼分塊和懶加載講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04