vue 实现微信端网页分享

这个问题折磨了好久，问了很多人都觉得很简单，的确很简单相对于做过了的人来说的话，的确如此，但是第一次做的话，太多坑要踩了，决定记录下来

1、公众号配置：

如果你们的公众号有专人保管，那么跟他说把安全域名加一下，安全域名用于微信的验证，没有这一步操作，下面的都白搭。比如我们的测试公众号，绑定的就是我们测试服务器的域名。同理，生产也是如此。

2、后端配置VUE:

要想使用微信的JS-SDK功能，需要生成签名，配合appId才能使用，这些步骤通常是由后端生成的。这里省去3000字描述如何生成签名，反正你找后端同学就对了。

3、前端配置

终于轮到我们前端上场了，啰嗦了那么多，下面让我们正式起飞。
4，安装微信JS-SDK

首先我们通过npm 安装微信的js-sdk，当然你也可以在index.html页面中直接加
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
引用，哪种方式都可以。

//安装
npm install weixin-js-sdk --save

//在需要使用的路由里进行引用   也可以进行全局引用
import wx from 'weixin-js-sdk'

话不多说，先上代码了

//微信分享
      WeChatshare(){
        let that=this;
        let data={url:window.location.href.split('#')[0]};
        this.axios.post('/api/v1/signture',data)
        .then((res)=>{
          wx.config({
            debug: false, //开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.data.appId, //必填，公众号的唯一标识
            timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.data.signature, // 必填，签名
            jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
          });

          //拼接当前地址
          let shareUrl=window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1];
          shareUrl = shareUrl.split('#')[0] + 'static/html/redirect.html?app3Redirect=' + encodeURIComponent(shareUrl);

          wx.ready(function () {
            //分享给朋友
            wx.onMenuShareAppMessage({
              title: that.fenxi_title,
              desc: that.fenxi_describe,
              link: shareUrl,
              imgUrl: that.fenxi_img,
              success: function (res) {
                alert('分享成功！');
              },
              cancel:function(res){
                alert('分享失败！');
              }
            })
            //分享到朋友圈
            wx.onMenuShareTimeline({
              title: that.fenxi_title,
              link: shareUrl,
              imgUrl: that.fenxi_img,
              success: function (res) {
                alert('分享成功！');
              },
              cancel:function(res){
                alert('分享失败！');
              }
            })
          });
        })
        .catch((res)=>{
          // console.log(res);
        })
      },

还是分解下吧
一开始还是先查看微信公众平台
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

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

wx.ready(function () {
            //分享给朋友
            wx.onMenuShareAppMessage({
              title: "",// 分享标题
              desc:  "",// 分享描述
              link:  "",// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl:  "",// 分享图标
              success: function (res) {
                alert('分享成功！');
              },
              cancel:function(res){
                alert('分享失败！');
              }
            })
            //分享到朋友圈
            wx.onMenuShareTimeline({
              title:  "",// 分享标题
              link:  "",// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: "",// 分享图标
              success: function (res) {
                alert('分享成功！');
              },
              cancel:function(res){
                alert('分享失败！');
              }
            })
          });

根据sdk文档的教程来，如果都没问题的话还是报签名错误，那应该是后台的问题了

后面可能还会出现分享的链接一直跳转至首页问题，我用的vue 带hash '#/' 微信分享后点开链依然是首页，百度了下，记录下来

第一种方法

网上很多网友都说这个方法可行通过尝试后发现依然还是出现那个问题

//将地址拼接
window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1]

第二种方法使用url重定向测试有效

在static文件夹下，新建html/redirect.html。
redirect.html 内容：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <script>
      let url = location.href.split('?')
      let pars = url[1].split('&')
      let data = {}
      pars.forEach((n, i) => {
          let p = n.split('=')
          data[p[0]] = p[1]
      })
      if (!!data.app3Redirect) {
          self.location = decodeURIComponent(data.app3Redirect)
      }
  </script>
    </body>
</html>

然后最后的地址

let shareUrl=window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1];
shareUrl = shareUrl.split('#')[0] + 'static/html/redirect.html?app3Redirect=' + encodeURIComponent(shareUrl);//需要分享的地址

到了这里就结束了，可能写的不是太好，请打算指教

vue 实现微信端网页分享