快捷導(dǎo)航

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

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

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

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

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

所有需要使用JS-SDK的頁(yè)面必須先注入配置信息，否則將無(wú)法調(diào)用（同一個(gè)url僅需調(diào)用一次，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶(hù)端不支持pushState的H5新特性，所以使用pushState來(lái)實(shí)現(xiàn)web app的頁(yè)面會(huì)導(dǎo)致簽名失敗，此問(wèn)題會(huì)在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è)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
  imgUrl: `image',
  success: function() {
   console.log(success)
  },
  cancel: function() {
    console.log(failf)
  }
 };
 wx.ready(() => {
  wx.onMenuShareAppMessage(config);
  wx.onMenuShareTimeline(config);
 });

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

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

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

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

//通過(guò)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è)面對(duì)應(yīng)的公眾號(hào)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();
 }
});

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

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

通過(guò)如上修改以后，我們的公眾號(hào)在IOS和android端的分享功能都可以正常的跑起來(lái)啦。

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

您可能感興趣的文章: