Vue history模式微信分享填坑

这个问题困扰了我很久,相信有很多人也都碰到过,因为关于这个坑的提问能百度出一堆,之前也一直在网上寻找解决方案,有些文章要么一笔带过,有些要么不适用,姿势始终不正确,还好,通过不断的尝试与摸索,终于搞定了。

行李旅宿

先说问题,做过传统多页面应用微信分享的人都知道,不管是Android还是IOS上,在需要做自定义分享的页面上做一次签名和注入就可以了,只要签名正确,就不会有问题。但是对于SPA的应用,表现的就很奇葩,我的问题是Android分享正常,但是在IOS上始终报"Invalid Signature",而有些人是Android有问题,而IOS没问题,从jssdk文档上看,这个可能是android对于pushState的支持问题,在此不讨论这个。

由于使用的是vue-router做页面跳转,而问题也出现在这里,IOS对于URL的处理与Android有差异。对于Android而言,它的每次路由的变换,URL都跟着改变,也就是说它的Landing Page和Current Page同时在变,这就和传统应用一样,在每个页面做签名就行。但是对IOS而言,每次路由的变换,URL却不变,也就是说虽然它的Currernt Page在变,但是它的Landing Page不变,这就是让人很蛋疼的地方,也不知道是微信的问题还是safari的问题,当初想搞清楚这个还给微信团队发了封邮件,很显然,他们很忙没有理我。

经过反复的试错,起初,将一般分享的问题解决了,但是如果配些诸如GA的跟踪参数,或者进行二次分享还是会有问题,最后对URL又进行了一次编码处理,总算一切正常。

分享成功

解决方案也不麻烦:

1、对于Android,用每个页面的URL做签名参数,对于IOS,使用入口URL进行签名(切记),我是使用VUEX进行url的更新

2、一定要在mounted中做签名的初始化操作,反正我的created就是不成功。

3、对需要签名的URL进行encodeURIComponent编码,这个主要处理URL带参的分享问题。

4、在后台再对用于签名的URL进行一次解码。

踩了这么长时间的坑,赶紧给后人栽个树,我这个只是history模式的解决方法,hash模式的问题不在这个讨论范围内。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,698评论 25 709
  • 无所为而无所谓,无所谓而无所不为。 ——三火卍 ...
    陈小五525阅读 3,177评论 0 0
  • AssetLibrary组成 AssetLibrary:代表整个设备中的资源库(照片库),通过AssetLibra...
    堂吉诃德灬阅读 4,476评论 0 0
  • 小时候是父母留我们在家出门打拼,现在反过来,成了我们外出不归。昨天晚上吃饭,爸爸说明天就没有人帮我洗碗了,一...
    Amanda_DQQ阅读 1,501评论 1 1
  • “活在未来”,一直以为,我们都接触到“活在当下”这个概念,今天听到“活在未来”这个词确实有点震动。 “活在未来”其...
    明娜的诗和远方阅读 2,548评论 0 0