Запишите яму пользовательского обмена WeChat под vue2.0 (режим истории)

Тукао: Я просматривал документ два или три раза до и после пользовательского обмена WeChat.Вы чувствуете, что большие парни настолько умны в написании документов? Два дня дрожал в углу...

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

----->>>>>  通过调用后台接口来获取上面的 （* 必填项）, 并在mounted开始配置初始化

wx.ready(function(){

  // 分享到朋友圈
  wx.onMenuShareTimeline ({
    title: `title`,
    desc: `desc`,                           //  分享描述
    link:  `自己分享的路由地址`, 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

    imgUrl: `自定义图标`, // 分享图标
    success: function () {
    },
    cancel: function () { 
    }
  });

  // 分享给朋友
  wx.onMenuShareAppMessage({
    title: `title`,
    desc: `desc`,
    link:  `自己分享的路由地址`, 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: `自定义图标`, // 分享图标

    success: function () {
    },
    cancel: function () { 
    }
  });

  wx.error(function(){
    salert('验证失败');
  });
});

Благодаря вышеперечисленным трем шагам функция обмена друзьями и кругом друзей в WeChat завершена, и я очень рад открыть локальный инструмент отладки WeChat для разработчиков >>> Успех! ! ! !

Расскажите о разработке PR-функции и запустите ее с гордостью.

PR пришел ко мне через два дня и сказал мне, что есть проблема с обменом WeChat, WTF? ? Первые два дня все было нормально, но вдруг возникла проблема. Вот скриншот, опубликованный в сети:

Затем я начал исследовать, что пошло не так, один за другим.Сначала я проверил белый список WeChat, элементы конфигурации wx.config, фоновые данные и асинхронную инициализацию, а затем обратился к инструментам разработчика для проверки, и проблем не было. Поэтому я снова поднял его и обнаружил, что все еще не могу поделиться им.Я пошел в WeChat, чтобы посмотреть документ, и обнаружил, что там нет незаконных шрифтов и любого контента, нарушающего документ WeChat. Повторный обмен обнаружил закономерность.

Вот в чем дело! ! !

Появляется только в первой акцииНазвание и связь потеряны，Обновите текущую страницу, а затем успешно поделитесь ею, поэтому я выполнил поиск в Google и обнаружил, что WeChat не так дружелюбен к одностраничному обмену SPA (внезапно напомнил мне о предыдущем IE...), впервые под ios общая ссылка всегда будет URL-адресом, который вы посещаете в первый раз. Посмотрите на картинку ниже:

В системе ios его необходимо обновить один раз, чтобы правильно поделиться, и текущий URL-адрес необходимо сохранить.

Решение:

Создайте новый файл share.js в каталоге src/assets/js и зарегистрируйте его глобально в main.js.При вызове каждого компонента передайтеХук beforeRouteEnter оценивает терминал ios, а затем загружает новый документ с помощью метода assign().С тех пор пользовательский обмен WeChat закончился... Давайте посмотрим на результаты после успешного пользовательского обмена:

Конкретный метод реализации beforeRouteEnter:

beforeRouteEnter (to, from, next) {
  var u = navigator.userAgent;
  var IOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  // 修复iOS版微信HTML5 History兼容性问题
  if (IOS && to.path !== location.pathname) {
    // 此处不能用location.replace
    location.assign(to.fullPath)
  } else {
    next()
  }
}

Следующий share.js является конкретным методом реализации:

  // ajax来请求wexin 
  function getWxChat() {
     return new Promise((resolve, reject) => {
       $.ajax({
         url: 'https://res.wx.qq.com/open/js/jweixin-1.0.0.js',
         dataType: "script",
         cache: true,
      })
      .done(function () {
       resolve(window.wx)
      })
      .fail(function (error) {
        reject(error);
      });
    })
 }

 // 后台索要签名算法
  function backAround() {
    return new Promise((resolve, reject) => {
      $.ajax({
        url: `XXX.com`,//后台索要的算法签名
        method: 'POST',
        data: {
          url: window.location.href.split('#')[0],
        },
        type : 'json'
      }).done(function(ret) {
        resolve(ret)
      }).fail(function(ret) {
        reject( ret );
      })
    })
  }
export function wechatShare(shareDate) {
  return new Promise(async function(resolve, reject) {
    try{
      let isWechat=navigator.userAgent.indexOf('MicroMessenger')>-1 //判断为微信浏览器

      if(!isWechat){
        return resolve('not weichat')
      }
      if(!window.wx){
        await getWxChat();
      }

      var defaultData = {
        title: `分享的标题`,
        content: `内容`,
        link: `${window.location.href}`,
        logo: ``, //分享出来的图片的
        success: function (res) {
        },
      }

      let data = { ...defaultData, ...shareDate }
      let ret = JSON.parse(await backAround())

      wx.config({
        debug: false, // 开启调试模式,
        appId: 'XXXXX', // 必填，公众号的唯一标识
        timestamp: ret.timestamp, // 必填，生成签名的时间戳
        nonceStr: ret.nonce_str, // 必填，生成签名的随机串
        signature: ret.signature,// 必填，签名，见附录1
        jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
      })

      wx.ready(function () {

        wx.onMenuShareTimeline({
          title: data.title,
          desc: data.content,
          link: data.link,
          imgUrl: data.logo,
          dataUrl: '',
          success: data.success,
          cancel: function () {}
        })

        wx.onMenuShareAppMessage({
          title: data.title,
          desc: data.content,
          link: data.link,
          imgUrl: data.logo,
          dataUrl: '',
          success: data.success,
          cancel: function () {}
        })
      
      })
    }catch(error){
      reject( error );
    }
  })
}

Наконец, я хочу сказать, что когда я пишу контент, я фактически записываю свою собственную историю крови и слез, а также делюсь с вами ямой кастомного обмена WeChat. Документы WeChat иногда заставляют людей сомневаться в жизни и кодировании. есть что-нибудь лучше Решения могут быть сообщены.