微信公众号分享链接自定义hash值的处理

微信公众号默认的分享样式是直接分享一条链接的，样式丑陋。但是微信jsdk暴露了分享的API可以自定义分享样式。

一、分享鉴权及分享接口冲定义

这一块的文档很全面，不做细述。关键代码如下:

    function setConfig(appId) {
         axios.get(props.commonApi + '/Recruitment/WXGetSign?url=' + 
         encodeURIComponent(window.location.href.split('#')[0])).then(function (res) {
            var result = res.data.result;
            wx.config({
              debug: false,
              appId: appId,
              timestamp: result.timeStamp,
              nonceStr: result.nonceStr,
              signature: result.signature,
              jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone'
              ],
            });
        
            wxShareReady({
              title: '分享链接标题',
              desc: '欢迎您的访问',
              link: window.location.origin + window.location.pathname + 
              '?initial=wechat&hash=' + Base64.encode(window.location.href.split('#')[1]),
              imgUrl: 'https://public.xxx.com/images/logo.jpg'
            })
          })
    }
复制代码

关键点是传给后台的url鉴权链接要和当前url一致，通过encodeURIComponent传给后台拿到鉴权信息，wx.config里配置对应属性。

二、hash路由页面分享的实现

我这边解决的一个主要问题是，微信公众号分享后会把hash后面的字段丢弃掉，导致从详情页分享的页面，点击只能到跟路由页面。 要解决这个问题，第一种办法可以使用hastory模式；这个需要服务端配合设置，然后页面的链接就是不带hash的完整链接。 我这里使用第二种办法:在自定义分享的link字段时，将hash后的字段截取，Base64.encode一下赋值为hash变量放在url上分享出去，在页面进入的路由判断是否是分享进入的链接， 如果是则获取hash属性值Base64.decode一下使用框架的路由定向到对应的页面去，从而实现纯前端的方式分享完整页面链接。

三、不同页面重定义分享接口

最后补充一点，要想实现分享所有页面的完整路径，需要在页面的路由中重新调用wxShareReady传入当前页面的link，这样从不同页面分享的链接才会是对应的页面。

转载于:https://juejin.im/post/5cdb916cf265da03ab234bf5