Vue单页面hash模式公众号苹果，安卓微信sdk分享整理

基本操作查看微信文档。

以下是采坑过程。

1。config的url用window.location.href.split('#')[0]。分享的接口如onMenuShareAppMessage的link用想要分享的页面的地址。如a/b/c/#/d

此时安卓微信都能验签成功。但是苹果得分享跳转的都是首页。

2。在分享的地址link加上要跳转的页面的参数。再在页面入口app.vue判断并重定向

//路由守卫那里获取要进行分享的页面的地址参数
let tempUrl = store.state.shareUrl + '/#' + to.fullPath;
let shareUrl= store.state.shareUrl + '?app3Redirect=' + encodeURIComponent(tempUrl)

//shareUrl传给分享的link

 let url = location.href.split("?");
    // let url = test.split("?");
    if (url.length > 1) {
      let pars = url[1].split("&");
      let data = {};
      pars.forEach((n, i) => {
        let p = n.split("=");
        data[p[0]] = p[1];
      });
      // console.log(data)
      // console.log(decodeURIComponent(data.app3Redirect));
      // return;
      if (!!data.app3Redirect) {
        window.location.href = decodeURIComponent(data.app3Redirect);
      }
    }

安卓验签失败，并且分享出去的内容图片和详细详细不出来（还是可以点分享的，只不过分享内容没有详情，图片，标题用的页面的标题而不是自定义，无法调用分享成功的回调）。链接会带上微信的参数from=singlemessage&isappinstalled=0

苹果正常进入没问题，但是如果点了安卓验签失败分享出来的链接进入页面之后就会验签失败。

分析后是苹果的config的url带上了微信传的参数（from=singlemessage&isappinstalled=0）之后就会错误。

修改苹果请求验签用的url为当前页面的正常地址。

url = `${location.origin}${location.pathname}${location.hash}`;

此时苹果正常，安卓依然失败。

3。安卓用分享页面的地址去请求签名。就是用link去请求签名。

签名无效。微信文档这点很明确。粗体引用微信文档内容。确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)😕/'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#66

 

4。经过对比猜测，安卓改回

location.href.split('#')[0];

但是分享的链接link修改为

let shareUrl= store.state.shareUrl + '/?app3Redirect=' + encodeURIComponent(tempUrl)

 

成功。

说明：改了太多次，回想起来可能代码跟使用表现对不上。反正都是不成功就对了。