记一次微信分享的坑，ios和安卓分享打开的url不一样

关注

原创 2023-03-10 16:10:58 1.2k 阅读 AI 写同款· GEO 优化 ›

vue微信浏览器安卓正常 ios config 报错 “errMsg“:“config:invalid问题最近使用了wx-js-sdk，对接了一下微信环境下的功能，在使用wx.config中android 上可以config ok 的但换到苹果上报出invalid signature的错误。微信给的方法就是使用hash /苦笑 ^_^ 微信也提到过不会存在这个问题，但是23年也遇见了 /苦笑 ^_^ 看了下github中的issue 提出问题在 2016年...2. ios访问只记录第一次的页面，跳转页面时页面不会改变（刷新及正常），android 正常。微信官网在之前版本也描述过。阅读详情

一、环境

vite3+vue3+ts+router

二、问题描述

接微信分享sdk（1.2.0版本）什么的，都已经完成，现在问题出在了分享的url不一致

产品需求是：不同路由页面，分享出来始终保持为首页

现有项目的路由是hash路由，不能改为history的，这是前提

于是自己查阅了网上已有的方法，还是行不通，先贴一下我的处理逻辑：

const imgPath = new URL('@/images/logo.png', import.meta.url).href
// 这里使用了后端封装好的请求
const requestUrl = `${api.wechatShare}?shareUrl=${encodeURIComponent(window.location.href.split('#')[0])}`
axios({ url: requestUrl }).then(({ data }) => {
  let configData: any
  try {
    configData = JSON.parse(data)
  } catch (error) {
    configData = {}
  }
  wx.config({
    debug: false,
    appId: configData.AppId,
    timestamp: configData.Timestamp,
    nonceStr: configData.NonceStr,
    signature: configData.Signature,
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
  })

  wx.ready(function () {
    wx.onMenuShareTimeline({
      title: '分享标题',
      link: window.location.href.split('#')[0],
      imgUrl: imgPath,
      success: function () {},
      cancel: function () {}
    })
    wx.onMenuShareAppMessage({
      title: '分享标题',
      desc: '副标题/描述',
      link: window.location.href.split('#')[0],
      imgUrl: imgPath,
      type: 'link',
      success: function () {},
      cancel: function () {}
    })
  })
  wx.error(function () {})
})

处理逻辑没毛病的对吧，那我就从有问题的页面url开始分析

举个栗子：

分享页面的url由上述代码可以看出，理解成写死的就可以了

正常页面：https://baidu.com/index.html

错误页面：https://baidu.com/index.html#/pageA

安卓手机不管怎么分享，都是正确的

但是苹果手机只要分享出来错误页面，再分享还是错误页面！调试的头疼

三、解决方案

分享url写死了，为啥在ios下就会有问题呢，既然问题无法定位，就粗暴点解决吧

思来想去，用路由守卫判断！！

router.beforeEach((to, from, next) => {
  if (from.fullPath === '/' && to.name === 'pageA') {
    next('/index')
  } else {
    next()
  }
})

简单粗暴，解决完毕！

ps：

微信分享的机制：打开的是链接形态，分享出去也是链接形态。。

我小米手机，用浏览器打开，然后分享到微信就是卡片（小米标识），然后打开卡片重新分享就是带卡片的

收录于

Vue.js

前端开发

微信分享

标签

#微信 #javascript #vue #typescript

微信图片分享支持url，缩略图支持url 微信图片分享支持url，缩略图支持url 在集成微信分享的过程中，如果缩略图是url形式，或者大图分享的图片是个url，就需要我们先把图片下载下来，然后依据微信的要求对图片做一些压缩操作，最后将图片的数据设置给要分享的对象即可。我们一般需要支持的分享类型主要有文字类型(WXTextObject)、图片类型(WXImageObject)和网页类型(WXWebpageObject)，具体请看分享与收藏功能-Android开发手册。缩略图支持url 拿我们常见的网页分享举例，msg.thumbData对应的就阅读详情