本人遇到的微信端分享链接错误的处理方式

1.bug问题复现(bug问题出现情况)

ios在微信浏览器使用,从A页面进入,然后授权登录后(重定向后进入)。进入到B页面将B页面分享出去。分享出去的B页面打开显示为A页面。
安卓客户端一切正常。

2.bug问题分析

首先ios和安卓在配置微信js-sdk的config时候就有所不同。
IOS:微信IOS版,每次切换路由,SPA的url是不会变的,发起签名请求的url参数必须是当前页面的url就是最初进入页面时的url
Android:微信安卓版,每次切换路由,SPA的url是会变的,发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的)
微信开发文档

步骤三:通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,
否则将无法调用(同一个url仅需调用一次,
对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,
所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

3. 解决方式

// 判断ios还是android
  Vue.prototype.isIosOrAndroid = function () {
    let u = navigator.userAgent;
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端
    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
    let isStr = ''
    if (isAndroid) {
      isStr = 'android'
    }
    if (isiOS) {
      isStr = 'ios' 
    //配置iOS端的config 使用下文的firstUrl即可
    }
    return isStr
  }
//App.vue中 
//将首次进入页面的链接存储起来
//判断有无授权登录重定向  通过获取当前链接上的参数有无second   有则不存
if (!this.$route.query.second) {
      this.url = window.location.href.split("#")[0];
      localStorage.setItem("firstUrl", this.url);
    }


let url = window.location.href+"&second=1";
    url = encodeURIComponent(url);
    window.location.href =
                  "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
                  res.appId +
                  "&redirect_uri=" +
                  url +
                  "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";


如有错误。 欢迎您指正!!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 之前分享过一篇转载的微信分享填坑文章 基本涵盖了微信分享功能开发的基本操作。 实际项目中,在做微信分享追踪的时候,...
    如意同学Try阅读 6,942评论 0 2
  • 过年意味着一年到头了,该庆贺一番,自我犒劳一番。 过年讲究比平时要吃的丰盛一点,穿得考究一点,希望在新的一年里能有...
    泰山寒梅阅读 416评论 2 14
  • 上一篇文章已经介绍了关于AddressBook.framework框架访问通讯的方法,今天来介绍一下利用RHAdd...
    Paulpang阅读 713评论 0 1
  • 记得去年我看了两百多个电影,疯狂的时候我规定自己一天看一个还一天写一个影评。 渐渐地我就觉得体力不支了,严重影响了...
    花蘼人阅读 263评论 1 7