vue项目使用微信JS-SDK实现自定义分享（前端）

需求：h5链接分享到微信好友、朋友圈的链接卡片内容可以自定义，如下图

实现步骤：

1. 公众号绑定域名：登录微信公众平台-->公众号设置-->功能设置-->js接口安全域名
2. 在微信公众平台获取appid，用于后面使用后端定好的接口传参
3. vue项目接入微信jssdk：
   • 安装jssdk npm install weixin-js-sdk --save
   • 在需要分享的页面引入 import wx from 'weixin-js-sdk'
   • 通过config接口注入权限验证配置：

 Request({
        url: "/fxClient/platform/jsapi",
        method: "get",
        params:{appid:'wx7e4ef*********', url:window.location.href.split('#')[0]}
      })

通过向后端接口传参appid、window.location.href.split('#')[0]，后端会返回signature、noncestr、timestamp。

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

通过后端接口获取的时间戳、随机串、签名等组成一个config对象。

wx.config(config);

调用wx.config()传入上面的config对象。
注：config对象中的debug开启时可以log或alert出调用的所有api的返回值判断是否调用成功。
4.调用分享接口

config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

wx.ready(function(){
            let config={
              title: '好物高返利，尽在飞选里，飞选购物，好省又赚。', // 分享标题
              desc: '点击下载【飞选】速领0元好物哦~', // 分享描述
              link: window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              type: 'link',//分享类型,music、video或link,不填默认为link,
               imgUrl:'http://5sale.cn/uploadfile/static/wxH5Share.png',
            }
            wx.updateAppMessageShareData(config)
            wx.updateTimelineShareData(config)
            wx.onMenuShareAppMessage(config)
        })

在wx.config()调用成功后，在wx.ready()中调用分享所用到的接口。分享接口即可自定义分享的链接卡片的标题、内容、图片等。
坑：在微信中分享到朋友圈或好友时，分享出去的路由被破坏，打开分享的链接，路由中的“#”会被去掉并追加？fromTimeline之类的后缀参数，这就造成了分享出去的链接只能进入首页，无法正常跳转到其他路由。
这里的分享链接使用手动拼接，如：

link: window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1],

最终效果：