最近的一個公眾號是基于vue的spa應用，在接入微信分享和微信語音的時候出現了：在Android上一切正常，但是在ios端調用wx.config的時候總是失敗，去翻了官方文檔也并沒有找到解決方案，最后在測試中發現是因為初始化的時候傳入的URL的問題。具體過程如下：
微信config接口配置，官方文檔如下：
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對于變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。
官方明確給出SPA在每次url變化時進行調用,于是我們的最初代碼如下：
// 此處在main.js中，在vue-router每次改變路由的時候去調用wx.configrouter.beforeEach((to, from, next) => { let url =`www.example.com`; let getConfig = async function(url) { // res為后端接口中返回的config const res = await get_config(url); wx.config(res); console.log(res); };}) // 此部分為微信分享 var config = { title: 'title', // 分享標題 desc: 'desc', // 分享描述 link: 'link', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: `image', success: function() { console.log(success) }, cancel: function() { console.log(failf) } }; wx.ready(() => { wx.onMenuShareAppMessage(config); wx.onMenuShareTimeline(config); });上邊的代碼在安卓端運行時一切正常。
但是我們測試的時候在IOS端分享等功能全部失效，后來我們仔細排查，發現是在初始化config的問題，
我們發現在IOS端只需要在==網站根目錄中初始化一次即可==，所以我們對代碼進行了修改，如下:
1、先判斷當前環境
//通過userAgent判斷IOS環境 let isIOS = function() { var isIphone = navigator.userAgent.includes('iPhone'）; var isIpad = navigator.userAgent.includes('iPad'); return isIphone || isIpad; };// 如果是IOS系統，則只在根路徑初始化config if (isIOS()) { if (to.path === '/') { getConfig(url); next(); } else { next(); } } else { getConfig(url); next(); }最終我們的代碼如下：
router.beforeEach((to, from, next) => { let url = `*****`; let getConfig = async function(url) { const res = await get_config(url); wx.config(res); console.log(res); }; let isIOS = function() { var isIphone = navigator .userAgent .includes('iPhone'); var isIpad = navigator .userAgent .includes('iPad'); return isIphone || isIpad; }; var config = { title: '*****', // 分享標題 desc: '******', // 分享描述 link: '***************', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: `*****`, type: 'link', dataUrl: '', success: function() {}, cancel: function() {} }; wx.ready(() => { wx.onMenuShareAppMessage(config); wx.onMenuShareTimeline(config); }); if (isIOS()) { if (to.path === '/') { getConfig(url); next(); } else { next(); } } else { getConfig(url); next(); }});“*”部分為開發者自定義內容
最坑爹的是微信文檔并沒有提及關于IOS初始化的問題（或者是我沒有找到）。囧
通過如上修改以后，我們的公眾號在IOS和android端的分享功能都可以正常的跑起來啦。
以上這篇基于IOS端微信分享失效的踩坑及解決方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
