微信公众号IOS端复制链接出错安卓端分享链接打开只能进入首页等问题的解决

6次阅读

共计 1356 个字符,预计需要花费 4 分钟才能阅读完成。


最近在做某个需要在微信中打开的项目,部分页面会通过微信分享或复制链接分享给其他人,然后就遇到了以下坑:
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” 字段就直接跳转到首页?


正文完
 0