Vue单页式应用(Hash模式下)实现微信分享的实例(2)

个人认为比较坑的点(1):因为我的项目为单页式应用,并且采用了Vue中的hash模式,因此项目路径中带有#号的部分,微信可能会在其前面加一个?号(不知未来还会不会有变化)。这样当自己拼值时(如“?userId=123”)则需要取第二个问号后的值。之前无论如何都取不到自己拼在路径后的值,复制链接后才发现,微信默默地给加了一个问号和其他参数在其中。

个人认为比较坑的点(2):我的项目中,如果在公众号中浏览各个界面,直接都是通过路由进行跳转的。但当浏览者从分享窗口进入后,他从分享页按着正常路由跳转到其他页面,其他页面的逻辑中如果有需要获取当前页面url的需要,会发现这个url和正常路由跳转的不一样。

例如:

这是正常跳转后的路径:https://show.mypro.com/#/firPage?userId=1

这是从分享页跳转后的路径:https://show.mypro.com/?#/firPage?userId=1

非常明显,如果根据问号的索引去获取当前Id,我永远获取不到。不知是否和坑(1)中同一个原因,因此我独立写了出来。因为是第一次做这个地方的东西,而且只能在移动端环境,我测了很多遍才发现。得知真相的我宛如醍(bei)醐(gou)灌(ri)顶(le)。可能是我经验太少,才如此踩坑。

6.后续坑点补充:

(1) 微信分享中:只要是分享出去的页面,如果为hash模式(在路由中带有#号),微信都会在#的前边给加一个‘?'。虽然微信API中有说过关于#的问题。但是很容易单纯的认为,仅仅在需要分享的页面的url会被修改,这也是我疏忽的一个地方。

(2) 苹果和iPhone打架后,我的微信功能页也莫名其妙的受到了影响,虽然我的公众号没有涉及到打赏的功能。具体问题如下:

我的分享shareUrl为:

复制代码 代码如下:


var shareUrl = 'https://migxin.mypro.com/#/product_details?custId=null&shareCustId=' + custId + '&shareProductId=' + productId;

通过安卓分享出去的页面可以成功获取页面url后的值,并且成功显示页面。url如下:

复制代码 代码如下:


https://migxin.mypro.com/#/product_details?custId=7&shareCustId=7&shareProductId=1223

但是在iphone中,页面URl后的值被截取掉了,页面因为无法获取值而无法显示。url如下:

复制代码 代码如下:


https://migxin.mypro.com/?from=timeline#/product_details

可以看到微信把我的#前给加了东西,并且截取掉了我?后边拼接的值。这个问题依然存在,也希望有这方面经验的大神可以留下您宝贵的建议或者解决办法。

这对这个问题我目前用了个很牵强的处理办法:把shareUrl换成一个ajax请求,打开时直接像后台发请求,然后返回给我一个他那边拼的页面url我来进行解析,这样我就可以从这个url中解析值了。

7.有关微信公众号的关注页面:

目前我们不用自己去做公众号的关注页面,进入公众号,查看历史消息,在该页面会提供进入公众号的接口按钮。在这个页面中,按钮的状态为“进入公众号”,“关注”。可以自行判断当前用户是否已经关注公众号。该页面的链接也是直接可以复制得到的,对于迭代期比较紧张的情况 will do the trick~可以直接拿来使用。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyjdxg.html