Ethan Zhu
©️朱俊辉
All Rights Reserved.

Vue 开发spa应用时遇到的微信分享支付的坑

最近做的项目中最大的坑就是微信分享,尽管在百度google上搜寻了这类问题的解决方案,都没有找到好的,找到的解决方案少之又少.

最初看微信jssdk的官方文档,大致的流程就是在每个需要分享的页面获取签名进行微信config => 进行微信ready,文档中就简单的说了几个注意点,后来当我项目上线的时候,问题出现了,我用的是history模式,我的安卓机可以完美进行分享,但是ios就不能分享,ios在要分享的页面刷新一下又能分享了(尼玛坑爹微信,文档中什么都没有说,但是你是爸爸,不得不用)

这个bug在我许多天的baidu,google => 找到好像不错的解决方案 => 开分支进行修改测试 => 到没什么软用 =>暂时放一边做别的需求 => 需求做完再次回到这个问题上的死循环之后直到今天,终于解决了,虽然解决方案不是很完美.

在说明这个问题前先定义两个名词: Current Page(当前页) Landing Page(着落页)

举个例子,我们从任何地方点击链接进入页面A,然后依次浏览到B、C、D,那么Current Page就是D,而Landing Page是A,如果此时我们在D页面点击一下浏览器的刷新按钮,那么Landing Page就变成了D(以上均是在单页应用的环境下,即以hashbang模式通过js更改浏览器路径,直接href跳转的不算).

问题来了,在ios和安卓下呼出微信分享的时候,微信分享判断当前路径的规则分别是:

  • IOS:Landing Page
  • 安卓:Current Page

于是我的解决思路是!在项目的入口着落页请求签名进行微信config,当页面进入需要进行微信分享的页面的时候进行判断,如果是安卓则再次请求签名config并ready,否则就是ios,直接进行ready就好

2018-08-27
暂无评论

发表评论