（拿走不谢）H5微信分享时，在苹果手机分享一直不行，公开微信分享完整工具，以及微信地图

做微信分享时，在苹果手机分享一直不行，就尝试监听URL变化，发现不行。后来用刷新页面解决了。
watch: {
$route(to, from) {
/**
* $route是异步改变的，所以，在created()函数、mounted()函数，用this.$route.fullPath获取的是
* 上一个页面的链接，不是当前页面的链接。
* KaTeX parse error: Expected 'EOF', got '#' at position 94: …ransitions.html#̲基于路由的动态过渡 */ …route.fullPath)
}
},

解决方法：
import WeChatShareUtils from ‘…/…/util/WeChatShareUtils.js’;

created() {
  WeChatShareUtils.addFlag();

  this.Request.findShareByType(this.shopId, '11').then((res) => {
    if(res.success) {
      let shareTitle = res.data.title;
      let shareDesc = res.data.description;
      let shareLink = process.env.DOMAIN_SERVER + this.$route.fullPath;
      let shareImgUrl = res.data.image;
      WeChatShareUtils.share(shareTitle, shareDesc, shareLink, shareImgUrl);
    } else {
      this.$toast(res.msg);
    }
  });
},
destroyed() {
  WeChatShareUtils.deleteFlag();
}

附带WeChatShareUtils工具类：
/**

• 微信分享工具
• 需要手动点击右上角分享，才能调用分享的函数。自己写的按钮，是不能调用分享的。
• 更多资料：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
• 准备：
• 1、需要一个企业版的微信公众号（非个人版）。
• 2、购买服务器，配置域名。域名需要通过ICP备案。
• 3、登录微信公众平台，打开“公众号设置 -> 功能设置”，配置“JS接口安全域名”。
• 需要把一个txt文件上传到域名的根目录下，才能保存成功。
• 4、引入微信JSSDK组件，版本号可以任意选择，建议使用最新版本。
• 注意：
• 微信分享之后，点开链接，再次分享，小图标、描述都不见了，是因为
• 打开的链接和签名分享的链接，必须完全相同。不相同就会出现这种情况。
• TODO:先用低版本的，到时候整个项目更换到最新版本
  */

import axios from ‘axios’;
import Qs from ‘qs’;

export default {
isIOS() {
//判断是否iOS手机
let iOS = !!navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
if(iOS) {
return true;
}
return false;
},
addFlag() {
//iOS手机必须刷新页面，才能分享成功。安卓手机，不用刷新。
if(this.isIOS()) {
let iosReload = sessionStorage.getItem(“iosReload”);
if(!iosReload) {
sessionStorage.setItem(“iosReload”, “1”);
window.location.reload();
}
}
},
deleteFlag() {
//在vue的destroyed()函数调用。如果是刷新页面，不会触发destroyed()函数。
sessionStorage.removeItem(‘iosReload’);
},
/**

• 基于H5的微信分享
• @param title
• @param desc
• @param link 签名的链接，必须与当前页面的链接，完全相同，包括参数，否则签名失败。
• @param imgUrl
• @param shareUrl 如果分享的链接不填写，就使用link。shareUrl与link可以不相同。
  /
  share(title, desc, link, imgUrl, shareUrl) {
  let configUrl = ‘/app/user/login/config’;
  /*
  • params是添加到url的请求字符串中的，用于get请求。
  • 而data是添加到请求体（body）中的，用于post请求。
    */

/**
 * 注意，使用window.location.href分享时，获取的链接不是当前页面的，
 * 需要使用“协议 + 域名 + 端口 + this.$route.fullPath”的方式，这样才能分享。
 * @type {{url: *}}
 */
let data = {
  url: link
};
axios.post(configUrl, Qs.stringify(data), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  timeout: 60000
}).then((res) => {
  if(res.data.success && res.data.data) {
    let data = res.data.data;
    wx.config({
      //调试模式
      debug: false,
      appId: data.appId,
      timestamp: data.timestamp,
      nonceStr: data.nonceStr,
      signature: data.signature,
      //需要使用的JS接口列表
      jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline',
        'onMenuShareQQ', 'onMenuShareQZone', 'onMenuShareWeibo',
        'openLocation', 'getLocation']
    });
  }
}).catch((res) => {
  console.error(res);
});

/**
 * 微信第一次分享，在安卓手机完全没问题，但是，在苹果手机，不行，要刷新一下才行。
 * 或者分享出去，再点开链接，然后分享，没问题，不用刷新。
 * 经过检查：
 * 1、分享的链接是没问题的。H5弹窗显示，以及后台的接口显示，链接都是对的。
 * 2、签名是正确的。
 * 3、link必须和公众号js安全域名一致。 -> 链接没错。
 * 4、link带有中文，需要使用encodeURIComponent()。 -> 没有中文。
 * 可能的原因：
 * 1、分享图标，压缩前与压缩后，经过测试，分享与图标无关。（网上说“ios分享图标不能超过32K”）
 * 2、安卓手机的url会随着路由切换变化，iphone手机却不会。经过测试，
 * 在苹果手机上，路由已经变化了。
 * 解决方法：
 * 刷新页面。
 */

//config函数执行通过，会自动执行ready函数
wx.ready(() => {
  //分享给朋友（即将废弃）
  wx.onMenuShareAppMessage({
    title: title,   //分享标题
    desc: desc,   //分享描述（简介）
    link: shareUrl? shareUrl: link,   //分享链接
    imgUrl: imgUrl,   //分享图标
    type: '',   //分享类型,music、video或link，不填默认为link
    dataUrl: '',   //如果type是music或video，则要提供数据链接，默认为空
    success: () => {
      //分享成功
    },
    cancel: () => {
      //取消分享
    }
  });

  //分享到朋友圈（即将废弃）
  wx.onMenuShareTimeline({
    title: title,   //分享标题
    link: shareUrl? shareUrl: link,   //分享链接
    imgUrl: imgUrl,   //分享图标
    success: () => {
      //分享成功
    },
    cancel: () => {
      //取消分享
    }
  });

  //分享到QQ（即将废弃）
  wx.onMenuShareQQ({
    title: title,   //分享标题
    desc: desc,   //分享描述（简介）
    link: shareUrl? shareUrl: link,   //分享链接
    imgUrl: imgUrl,   //分享图标
    success: () => {
      //分享成功
    },
    cancel: () => {
      //取消分享
    }
  });

  //分享到QQ空间
  wx.onMenuShareQZone({
    title: title,   //分享标题
    desc: desc,   //分享描述（简介）
    link: shareUrl? shareUrl: link,   //分享链接
    imgUrl: imgUrl,   //分享图标
    success: () => {
      //分享成功
    },
    cancel: () => {
      //取消分享
    }
  });

  //分享到腾讯微博
  wx.onMenuShareWeibo({
    title: title,   //分享标题
    desc: desc,   //分享描述（简介）
    link: shareUrl? shareUrl: link,   //分享链接
    imgUrl: imgUrl,   //分享图标
    success: () => {
      //分享成功
    },
    cancel: () => {
      //取消分享
    }
  });

  //config信息验证失败会执行error函数
  wx.error((res) => {
    console.log('WeChat share error');
    console.log(res);
  });
});

},
getAddress() {
//获取地理位置，主要是经纬度
//需要在jsApiList添加getLocation
return new Promise((resolve, reject) => {
wx.getLocation({
type: ‘wgs84’,
success: (res) => {
resolve(res);
}
});
});
},
openMap(data) {
//打开地图
//需要在jsApiList添加openLocation
wx.openLocation({
latitude: parseFloat(data.latitude), //纬度，必须是数字，不是字符串
longitude: parseFloat(data.longitude), //经度，必须是数字，不是字符串
name: data.name? data.name: ‘’, //位置名（地点）
address: data.address? data.address: ‘’, //地址详情说明
scale: data.scale? data.scale: 16, //地图缩放级别,整形值,范围从1~28。默认为28
infoUrl: data.infoUrl? data.infoUrl: ‘’ //在查看位置界面底部显示的超链接,可点击跳转
});
}
}