摘要:你要是問我為什么會出現這種情況,等我什么時候進微信團隊了,我再給大家解答。。。
很久沒有寫文章了,最近項目是基于微信公眾號的Vue項目,有一個非常重要的分享功能,不搞不知道一搞不得了,發現vue-router和微信SDK配置有很大的兼容性問題,翻遍文檔,社區,博客,都沒有找到可以適合解決我這個問題的方法,最后是我們一起一個一個方法、一個一個api嘗試才找到解決辦法,現在和大家分享一下我們遇到的問題和解決方案。
先附上微信SDK文檔地址:https://mp.weixin.qq.com/wiki...
這里只針對討論Vue腳手架搭建,vue-router跳轉的SPA單頁面項目?。?/b> 很多是Vue-router和微信JS-SDK之間的BUG 問題1.url在IOS端和Android端表現不同當使用vue-router跳轉的SPA單頁面項目,在IOS端只要不刷新頁面,頁面URL永遠是第一次進來的url!
例如:
項目首頁地址為:www.baidu.com/home 項目詳情頁地址為:www.baidu.com/detail 當你在首頁點擊詳情頁跳轉按鈕觸發了this.$router.push("/detail") 且!頁面已經跳轉至詳情頁,但是你復制當前鏈接查看后 會驚訝的發現,url還是www.baidu.com/home 但!你強制刷新頁面后,url會變成www.baidu.com/detail
有趣的是,Android端不會出現這種情況,url會隨著頁面跳轉而改變。
你要是問我為什么會出現這種情況,等我什么時候進微信團隊了,我再給大家解答。。。
因為在wx.config中配置需要使用當前url進行簽名,這種問題出現導致IOS端和Android端不可共用一個wx.config分享代碼,需要分開討論并分開配置。
//因為問題1,所以我們要在IOS端進入項目時,記住第一次進來的url地址,供簽名使用 // 判斷瀏覽器是 Android端 or IOS端 let userAgent = navigator.userAgent; let isAndroid = userAgent.indexOf("Android") > -1 || userAgent.indexOf("Adr") > -1; let isIOS = !!userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); if (isIOS) { // 是IOS,這里用Vuex進行儲存 this.$store.commit("isIosFun", true); //記錄好第一次進項目的URL,供簽名使用 this.$store.commit("firstUrlFun", window.location.href.split("#")[0]); } else if (isAndroid) { // Android this.$store.commit("isIosFun", false); //安卓無需記錄,因為url會隨著頁面跳轉而改變,簽名使用window.location.href即可 }問題2.微信分享配置在IOS端和Android端api不同
微信分享是微信生態很重要的一個功能,特別對于公眾號項目,有些靠這個恰飯的啊
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104276.html
摘要:最近開發微信公眾號內嵌頁面,使用搭建的項目,由于業務需求,需要實現微信自定義分享功能,所以項目中集成微信。 最近開發微信公眾號內嵌H5頁面,使用vue搭建的項目,由于業務需求,需要實現微信自定義分享功能,所以項目中集成微信JS-SDK。微信JS-SDK是微信公眾平臺面向網頁開發者提供的基于微信內的網頁開發工具包。通過使用微信JS-SDK,網頁開發者可借助微信高效地使用拍照、選圖、語音、...
摘要:微信說明文檔分享的坑根據的文檔,很多人都是在初始化的配置的時候,傳入的當前的地址不正確。同樣的,給微信初始化的加入對應的參數。 date: 2018-12-13 15:23:09 用于記錄接入微信JS-SDK的坑,以后方便查詢第一次接入公眾號微信支付、分享、定位等等的坑的時候,心里是迷茫而又恐懼。因為,聽說坑特別多,后來發現自己的親身體驗到了這一點。 支付的坑 1、當前URL未注冊 ...
摘要:微信說明文檔分享的坑根據的文檔,很多人都是在初始化的配置的時候,傳入的當前的地址不正確。同樣的,給微信初始化的加入對應的參數。 date: 2018-12-13 15:23:09 用于記錄接入微信JS-SDK的坑,以后方便查詢第一次接入公眾號微信支付、分享、定位等等的坑的時候,心里是迷茫而又恐懼。因為,聽說坑特別多,后來發現自己的親身體驗到了這一點。 支付的坑 1、當前URL未注冊 ...
摘要:微信說明文檔分享的坑根據的文檔,很多人都是在初始化的配置的時候,傳入的當前的地址不正確。同樣的,給微信初始化的加入對應的參數。 date: 2018-12-13 15:23:09 用于記錄接入微信JS-SDK的坑,以后方便查詢第一次接入公眾號微信支付、分享、定位等等的坑的時候,心里是迷茫而又恐懼。因為,聽說坑特別多,后來發現自己的親身體驗到了這一點。 支付的坑 1、當前URL未注冊 ...
摘要:安裝并引入依賴包這里是說明文檔下載依賴包在需要用到的模塊引入檢查是否引入成功可以在引入的模塊中執行控制臺顯示以上代碼表示引入成功配置微信所有需要使用的頁面必須先注入配置信息,否則將無法調用開啟調試模式調用的所有的返回值會 1.安裝并引入JS-SDK依賴包 這里是JS-SDK說明文檔 1.1 npm 下載依賴包 npm install weixin-js-sdk --save 1.2.在...
閱讀 881·2023-04-25 19:17
閱讀 2179·2021-09-10 11:26
閱讀 1898·2019-08-30 15:54
閱讀 3411·2019-08-30 15:53
閱讀 2681·2019-08-30 11:20
閱讀 3392·2019-08-29 15:12
閱讀 1230·2019-08-29 13:16
閱讀 2384·2019-08-26 12:19