基于IOS端微信分享失效的踩坑及解決方法

更新時(shí)間：2018年01月09日 10:16:14 作者：kormondor

下面小編就為大家分享一篇基于IOS端微信分享失效的踩坑及解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

最近的一個(gè)公眾號是基于vue的spa應(yīng)用，在接入微信分享和微信語音的時(shí)候出現(xiàn)了：在Android上一切正常，但是在ios端調(diào)用wx.config的時(shí)候總是失敗，去翻了官方文檔也并沒有找到解決方案，最后在測試中發(fā)現(xiàn)是因?yàn)槌跏蓟臅r(shí)候傳入的URL的問題。具體過程如下：

微信config接口配置，官方文檔如下：

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用（同一個(gè)url僅需調(diào)用一次，對于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實(shí)現(xiàn)web app的頁面會導(dǎo)致簽名失敗，此問題會在Android6.2中修復(fù)）。

官方明確給出SPA在每次url變化時(shí)進(jìn)行調(diào)用,于是我們的最初代碼如下：

// 此處在main.js中，在vue-router每次改變路由的時(shí)候去調(diào)用wx.config
router.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', // 分享標(biāo)題
  desc: 'desc', // 分享描述
  link: 'link', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
  imgUrl: `image',
  success: function() {
   console.log(success)
  },
  cancel: function() {
    console.log(failf)
  }
 };
 wx.ready(() => {
  wx.onMenuShareAppMessage(config);
  wx.onMenuShareTimeline(config);
 });

上邊的代碼在安卓端運(yùn)行時(shí)一切正常。

但是我們測試的時(shí)候在IOS端分享等功能全部失效，后來我們仔細(xì)排查，發(fā)現(xiàn)是在初始化config的問題，

我們發(fā)現(xiàn)在IOS端只需要在==網(wǎng)站根目錄中初始化一次即可==，所以我們對代碼進(jìn)行了修改，如下:

1、先判斷當(dāng)前環(huán)境

//通過userAgent判斷IOS環(huán)境
 let isIOS = function() {
  var isIphone = navigator.userAgent.includes('iPhone'）;
  var isIpad = navigator.userAgent.includes('iPad');
  return isIphone || isIpad;
 };

// 如果是IOS系統(tǒng)，則只在根路徑初始化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: '*****', // 分享標(biāo)題
  desc: '******', // 分享描述
  link: '***************', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號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();
 }
});

“*”部分為開發(fā)者自定義內(nèi)容

最坑爹的是微信文檔并沒有提及關(guān)于IOS初始化的問題（或者是我沒有找到）。囧

通過如上修改以后，我們的公眾號在IOS和android端的分享功能都可以正常的跑起來啦。

以上這篇基于IOS端微信分享失效的踩坑及解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: