问答

微信 ios二次分享,页面打开空白,已做授权重定向处理

作者:admin 2021-08-21 我要评论

背景:分享出去的外链,会自动给加上微信标识,导致二次分享失败, 如打开页面: `https://xxx/#/deepCoupling/v-main?aaa=5555` 分享出去链接: https://xxx/fr...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

背景:分享出去的外链,会自动给加上微信标识,导致二次分享失败,
如打开页面:

`https://xxx/#/deepCoupling/v-main?aaa=5555`

分享出去链接:

https://xxx/from=groupmessage&isappinstalled=0#/deepCoupling/v-main?aaa=5555

解决办法:

R1、替换路径,简单粗暴(query字段只对微信有用,对我们没用)

  const origin = isIOS() ? window.location.origin + '/#/' : window.location.origin;
  window.location.href = environment.wxAuthUrl + '/third/authForLogin?authorizerAppid=' + wxAppId + '&businessURI=' + encodeURIComponent(origin);
  alert(window.location.href + '授权后地址333');
  if (isIOS()) {
    alert(getCookie('deepCouplingVmain') + '获取getCookie3333');
    if (window.location.href.indexOf('from') !== -1 || window.location.href.indexOf('isappinstalled') !== -1) {
      if (window.location.href.indexOf('deepCoupling/v-main') !== -1) {
        // window.location.href = getCookie('deepCouplingVmain') + '?random=' + Math.floor(Math.random() * 1048576);
        window.history.replaceState(null, '', getCookie('deepCouplingVmain'));
      }
    
    } else {
      if (window.location.href.indexOf('deepCoupling/v-main') !== -1) {
        if (!(getCookie('deepCouplingVmain'))) {
          setCookie('deepCouplingVmain', window.location.href);
        }
      }
    }
  }

但是页面重定向后没有刷新,需要手动刷新

ios第二次分享打不开

如果url不带?aaa=5555即正常
但是后面带了参数第二次分享就打不开了

 https://xxx/#/deepCoupling/v-main?aaa=5555

解决方案参考 https://segmentfault.com/a/11...

###
    window.location.replace(href);

试用了也是没效果 也是需要刷新

解决方案:

由于url带?a=555 参数都会导致 ios在第二次分享的时候打开页面空白状态
最后将a=555,进来的时候就setcookie,然后在ulr 带 from等因分享附带的参数 情况下,重定向,重定向url不带?a=555,而将?a=555放到分享的链接上。

代码如下:

export const getSearchUrl = (url) => {
    if (url.indexOf('?') !== -1) {
      const afterUrl = url.substring(url.indexOf('?') + 1);
      const cookieKey = afterUrl.substring(0 , afterUrl.indexOf('='));
      const cookieVal = afterUrl.substring(afterUrl.indexOf('=') + 1);
      setCookie(cookieKey, cookieVal);
    }
};
export const redirect = (url) => {
  if (url.indexOf('?') !== -1) {
    const beforeUrl = url.substring(0, url.indexOf('?'));
    if (window.location.href.indexOf('from') !== -1 || window.location.href.indexOf('isappinstalled') !== -1) {
      if (window.location.href.indexOf(beforeUrl) !== -1) {
        window.location.href =  environment.domainUrl + beforeUrl;
      }
    }
  }
}
export const wxOAuth = (wxAppId: string, url: string) => {
  sessionStorage.setItem(LAST_URL, url);
  getSearchUrl(url);
  const origin = isIOS() ? window.location.origin + '/#/' : window.location.origin;
  window.location.href = environment.wxAuthUrl + '/third/authForLogin?authorizerAppid=' + wxAppId + '&businessURI=' + encodeURIComponent(origin);
  redirect(url);
};

页面进来,获取id:

activateInfo.queryParams.subscribe(queryParams => {
      if (queryParams.mediaActivityParticipantId === '' || queryParams.mediaActivityParticipantId === null  || queryParams.mediaActivityParticipantId === undefined) {
        this.tutorId = getCookie('mediaActivityParticipantId');
      } else {
        this.tutorId = queryParams.mediaActivityParticipantId;
      }
    });

分享代码:

 wxShare({
        title: '',
        desc: '',
        link: window.location.origin + '/#/deepCoupling/v-main?mediaActivityParticipantId=' + this.tutorId,
        imgUrl: window.location.origin + '/assets/img/deep/share.jpg'
      });

页面关闭,清楚改页面cookie

ngOnDestroy() {
    delCookie('mediaActivityParticipantId');
  }
###

我....顶你个。在公司打开了你的连接...

###

重定向使用window.location.replace

let href = window.location.href;
if(href.indexOf('groupmessage') > -1 || href.indexOf('singlemessage') > -1 || href.indexOf('timeline') > -1){
    href = href.replace(/\?from=(groupmessage|singlemessage|timeline)(\S*)#/, '#');
    window.location.replace(href);
}

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 使用箭头函数return数据不能实现

    使用箭头函数return数据不能实现

  • 个人小程序号能接入小程序3D地图吗?

    个人小程序号能接入小程序3D地图吗?

  • vue 移动端项目中,使用了better-scrol

    vue 移动端项目中,使用了better-scrol

  • css如何做出区域平均划分为四列

    css如何做出区域平均划分为四列

腾讯云代理商
海外云服务器