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

Cobub 发布于2019-08-23 17:12 / 1865人阅读

摘要：折腾了一整天，官方文档看了好几遍，网上基本上所有的方法都试了，发现都没什么卵用，最后打开的分享页面，再复制分享页面的链接，发现链接是这个格式，相比之下只是多了个字段，抱着试一试的心态，在当前链接中添加，发现所有问题都迎刃而解。

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

云服务器服务器托管云服务器链接微信公众号分享java视频的微信公众号关于微信公众号的问题微信分享链接 php

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103984.html

Vue微信公众号兼容微信JS-SDK，使用分享等功能

摘要：你要是问我为什么会出现这种情况，等我什么时候进微信团队了，我再给大家解答。。。很久没有写文章了，最近项目是基于微信公众号的Vue项目，有一个非常重要的分享功能，不搞不知道一搞不得了，发现vue-router和微信SDK配置有很大的兼容性问题，翻遍文档，社区，博客，都没有找到可以适合解决我这个问题的方法，最后是我们一起一个一个方法、一个一个api尝试才找到解决办法，现在和大家分享一下我...

2json 2019-08-23 17:52 评论0 收藏0
h5实现分享链接到社交媒体

摘要：由于上线时间比较紧急，最终我们没有采用这种方式，而是选择了一个降级的方法，点击分享跳转到要分享的页面，弹出一个，提示请点击右上角分享，让用户使用微信自带的右上角的三个点进行分享。一、前言最近在调研分享功能，有一些心得，在此总结一下二、开发在浏览器点击dom元素调起分享到微信朋友，朋友圈，qq等功能如果一个一个来写，是非常麻烦的，所以在github上找了一个很好用的插件nativ...

SHERlocked93 2019-08-23 17:21 评论0 收藏0
移动端H5开发遇到的坑

摘要：微信分享签名错误单页应用模式下微信分享一直提示签名错误按照微信官网文档，已经引入，正确的配置安全域名，后台开发人员生成的签名也通过微信签名工具验证，但是前端的自定义分享一直报签名错误，没有办法自定义分享，如果确保了哪些基本配置没有问题，并且微信分享签名错误invalid signature vue单页应用history模式下微信分享一直提示签名错误invalid signature ...

Eirunye 2019-08-26 13:39 评论0 收藏0
移动端真机调试实战经验

摘要：我个人比较推荐的方法是或者安卓手机的这种方式，比较简单方便快捷，然后根据具体的环境再选择更为合适的调试方法。本文首次发表于本人的个人博客：http://cherryblog.site/ ，欢迎大家到我的博客查看更多文章~ 前言在开发中前端免不了要进行移动端的开发，然而在电脑上看的样式和手机上还是有一定的差距的，因为手机上有顶部的状态栏和底部的菜单栏，特别是在qq内置浏览器中打开，差...

qingshanli1988 2019-08-05 11:15 评论0 收藏0
移动端真机调试实战经验

摘要：我个人比较推荐的方法是或者安卓手机的这种方式，比较简单方便快捷，然后根据具体的环境再选择更为合适的调试方法。本文首次发表于本人的个人博客：http://cherryblog.site/ ，欢迎大家到我的博客查看更多文章~ 前言在开发中前端免不了要进行移动端的开发，然而在电脑上看的样式和手机上还是有一定的差距的，因为手机上有顶部的状态栏和底部的菜单栏，特别是在qq内置浏览器中打开，差...

rainyang 2019-08-20 16:21 评论0 收藏0