vue中使用baidushare分享到微信無法顯示bug解決方案


最近vue單頁面項目中有個頁面分享的功能需求,按以往經驗,選擇了百度開源的baidushare.js

經過一天的掙扎,終於弄清楚了分享到微信后無法顯示的原因。

對比分析:

  以往成功使用:另寫了一個專門的分享着陸頁,也就是一個html文件,然后在里面發請求拿數據渲染頁面。分享鏈接→http://www.123.com/share.html?id=123

       本次失敗使用: 分享着陸頁沒有單獨寫,還是利用vue單文件的一個子路由+參數。分享鏈接→http://www.123.com/#/share?id=123

       

結論: 

       通過查看baidushare分享到微信時所生成二維碼掃描出來的鏈接,並對比在線工具產生的的二維碼,驚奇的發現,不一樣!!! 

  baidushare會把需要分享鏈接 ‘#’ 號后面的全部丟棄並加上一堆亂七八糟的東西。直白了說,就是baidushare分享到微信時生成的二維碼是錯的,當然,這只是在開發vue單頁面應用並使用hash模式時才會產生,也只是分享到微信時才有問題。

解決辦法:

        1. 老老實實寫一個html着陸頁,避開 ‘#’。

        2. 自己找個插件生成正確的二維碼,然后在baidushare  config配置的 onAfterClick 回調里替代baidushare的二維碼。這里面需要一些基本的插件調用和dom操作,基礎知識,就不詳細寫了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM