记录一次vue2.0(history模式)下微信自定义分享的坑

记录一次vue2.0(history模式)下微信自定义分享的坑吐槽:关于微信自定义分享前前后后翻了文档两三遍,感觉大佬们写文档都是这么潇洒么?躲在角落里的我瑟瑟发抖了两天….. 1. 根据文档来配置(公众号安全域名,引入官方微信js) 2. 配置权限,根据微信文档描述:所有需要使用JS-SDK的页面必须先注入配置信息 3. 通过rea…


吐槽:关于微信自定义分享前前后后翻了文档两三遍,感觉大佬们写文档都是这么潇洒么?躲在角落里的我瑟瑟发抖了两天…..

下面我们(带着愤怒)来看微信文档来进行开发:传送门

1. 根据文档来配置(公众号安全域名,引入官方微信js)

2. 配置权限,根据微信文档描述:所有需要使用JS-SDK的页面必须先注入配置信息

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

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

3. 通过ready接口处理成功验证(直接在ready方法内写分享朋友以及朋友圈)

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('验证失败');
  });
});

通过以上三个步骤,微信分享朋友以及朋友圈功能完成,很高兴的打开本地微信开发者工具调试 >>> 成功了!!!!

带着自豪的心情告诉PR功能开发完上线。

过两天PR过来跟我说,微信分享有问题,WTF??前两天还可以,突然就出问题了,下面是线上分享的截图:

记录一次vue2.0(history模式)下微信自定义分享的坑

接下来开始逐一来排查到底是哪出了问题,首先检查微信白名单、wx.config配置项、后台数据、以及异步初始化,然后又去开发者工具看了一下,并没有任何问题。于是又推上去了,发现还是分享不出来,又去微信看了一下文档,发现并没有违规字体以及任何违反微信文档的内容。反复分享发现一个规律。

重点来了!!!

只有在第一次分享出现标题以及连接丢失,刷新一次当前页面后再去分享就成功了,于是谷歌搜了一下,发现微信对SPA单页面分享并不是那么友好(突然让我想起了以前的IE…),在ios下面第一次分享的链接永远都是你第一次访问的url。看下图:

记录一次vue2.0(history模式)下微信自定义分享的坑

在ios系统要刷新一次来才能正确分享,并且要保存当前url

解决办法:

在src/assets/js目录下面新建一个share.js,并在main.js进行全局注册,在每个组件进行调用的同时通过beforeRouteEnter钩子判断ios终端,然后通过assign()方法加载一个新的文档,自此微信自定义分享结束啦………..,来看一下自定义分享成功之后的成果:

记录一次vue2.0(history模式)下微信自定义分享的坑

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 );
    }
  })
}

最后想说下写内容的时候其实是在记录自己的血泪史,也给大家分享下微信自定义分享的坑,微信的文档有时候会让人怀疑人生,怀疑codeing,如果大家有什么更好的解决方法可以交流下。

今天的文章记录一次vue2.0(history模式)下微信自定义分享的坑分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/17362.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注