jetamiett 2019-07-01
最近在做某个需要在微信中打开的项目,部分页面会通过微信分享或复制链接分享给其他人,然后就遇到了以下坑:
1.IOS端复制链接或在其他浏览器中打开时,假如原网站链接本来应该是"http://xxx.xxxx.xxx/#/abcd",但复制和在其他浏览器中打开的链接都是"http://xxx.xxxx.xxx/#/"
2.android端分享页面时,wx.onMenuShareAppMessage配置没问题,分享后回调函数显示调用成功,但分享的链接打开依旧是"http://xxx.xxxx.xxx/#/"页(官方说6.7.2分享用updateAppMessageShareData接口,但是引入1.4.0版本js-sdk还是显示这个接口没法用)。
折腾了一整天,官方文档看了好几遍,网上基本上所有的方法都试了,发现都没什么卵用,最后打开IOS的分享页面,再复制IOS分享页面的链接,发现链接是这个格式"http://xxx.xxxx.xxx/?from=singlemessage#/abcd",相比之下只是多了个"?from=singlemessage"字段,抱着试一试的心态,在当前链接中添加"?from=singlemessage",发现所有问题都迎刃而解。代码如下:
.... ....wx.config配置.... .... const ua = window.navigator.userAgent.toLowerCase() const isIOS = !!ua.match(/iphone|ipad/) const isWechat = ua.includes('micromessenger') var firstEnter = true router.beforeEach((to, from, next) => { if (isWechat) { let toPath = location.origin + (location.pathname + (location.hash ? '?from=singlemessage#' : '') + to.fullPath).replace('//', '/') if (isIOS && location.href !== toPath) { if (firstEnter) { // 他人打开分享页面后,else中的内容会让第一个页面加载两次(应该是微信默认跳转引起的,else中明明已经禁用了vue的跳转) firstEnter = false } else { // 不采用vue默认跳转方式,使用原生跳转,解决复制链接或在其他浏览器中打开时,链接错误 next(false) location.href = toPath return } } let config = { title: to.meta.title || '', desc: location.href, link: toPath, imgUrl: '', type: 'link', dataUrl: '' } wx.ready(function () { wx.onMenuShareTimeline(config) wx.onMenuShareAppMessage(config) }) } next() })
猜测微信内部应该会对域名是mp.weixin.qq.com以外的链接进行判断,若没有"?from=singlemessage"字段就直接跳转到首页?