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

116 阅读 0 评论 77 点赞

我是靠谱客的博主轻松冬日，最近开发中收集的这篇文章主要介绍基于IOS端微信分享失效的踩坑及解决方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近的一个公众号是基于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.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', // 分享标题
  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端微信分享失效的踩坑及解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持靠谱客。