Vue微信自定义分享时安卓系统config:ok，ios系统config:invalid signature签名错误，或者安卓和ios二次分享时均config:ok但是分享无效的解决办法

       简述需求：要求指定页面可以进行微信自定义分享(自定义标题，描述，图片，链接)，剩下的页面隐藏所有基础接口。二次分享依然可以正常使用,切换至其他页面也可以正常进行自定义分享。

        这两天在做微信自定义分享的需求，相信大家都遇到过这问题，就是使用JS-SDK的页面注入配置信息时安卓系统config:ok，ios系统config:invalid signature签名错误。然后大家都去查微信jssdk的文档，里面所说的config:invalid signature可能原因你都一个个查验过发现没有问题，但是还是提示签名错误，是不是很抓狂很蛋疼？？？然后你再去查请求配置信息时的动态URL是否有问题，你会发现安卓ios打印出来的url都是正确的，问题究竟出在哪里呢？？？就问你难不难受！！！

        当我实现了安卓和ios系统均成功自定义分享时，出现了另一个bug，就是二次分享时ios系统当前页面正常有效，切换至其他页面时自定义分享失效了，但是debug发现安卓ios都提示config:ok，然而分享却无效，就问你难不难受！！！

        查阅了网上很多的解决方案，没有一个是真的能解决我所遇到的问题。说二次分享失效因为微信自带from等参数的、解决方案写一半的、没有效果的，让我感到深深的坑爹感。最后研究出来了解决方案，不需要对链接做清除微信带过来的参数，也不需要做太多的处理。

        安卓系统签名没问题，ios系统签名有问题，那么肯定就是url的问题了。其实问题就出在ios系统对vue-router的history的支持上，由于Vue的spa特点，尽管你打印出来都是你所要的当前页面url，只要你不刷新页面，ios获取到的url永远是你进入这个项目的第一个url，这样的话你请求签名就会变成动态url不一致导致签名失败。不信？？？你可以到签名失败的那个页面手动刷新一次，然后你会发现此时签名就成功了，因为刷新后获取的第一个url就是你当前的页面url。既然如此我们就需要在如何获取真正的动态url这里做文章，至于那些设置js安全域名、获取timestamp，nonceStr，signature这些我就不说了，百度一下大把解决方案。

        解决方法就是在路由守卫afterEach中判断是ios系统时保存第一次进入时的链接地址，每当路由进入页面时判断当前页面地址和保存的第一次进入的链接地址是否一致，不一致时用location.replace刷新页面，获取刷新后的地址进行请求。安卓系统则每次都拿当前页面地址进行请求。具体代码如下：

 1.在util.js文件中定义函数：

import { getSignature } from '@/api/api'

// 判断手机系统
export function isAndroid () {
  var u = navigator.userAgent
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
  if (isAndroid) {
    return true
  } else {
    return false
  }
}

2.在wechatConfig.js文件中定义函数：

import { getSignature } from '@/api/api'

/* eslint-disable no-undef */
// 微信注入依赖config校验
export function getWxConfig (url) {
  getSignature(encodeURIComponent(url)).then(data => {
    if (data.result_code === '000') {
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data.result.appId, // 必填，公众号的唯一标识
        timestamp: data.result.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.result.noncestr, // 必填，生成签名的随机串
        signature: encodeURIComponent(data.result.signature), // 必填，签名，见附录1
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'showAllNonBaseMenuItem', 'hideAllNonBaseMenuItem'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      })
    } else {
      console.log('获取授权信息错误')
    }
  }).catch(err => {
    console.warn(err)
    console.log('获取授权失败')
  })
}

// 微信分享配置 显示微信浏览器右边菜单中的显示所有功能按钮接口
export function wxShare (title, desc, url, imgUrl) {
  wx.ready(function () {
    wx.showAllNonBaseMenuItem()
    wx.onMenuShareAppMessage({ // 分享给朋友
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: url, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success: function () {
        // 用户确认分享后执行的回调函数
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      }
    })

    wx.onMenuShareTimeline({ // 朋友圈分享
      title: title, // 分享标题
      link: url, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success: function () {
        // 用户确认分享后执行的回调函数
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      }
    })

    wx.onMenuShareQQ({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: url, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success: function () {
        // 用户确认分享后执行的回调函数
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      }
    })

    wx.onMenuShareWeibo({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: url, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success: function () {
        // 用户确认分享后执行的回调函数
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      }
    })

    wx.onMenuShareQZone({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: url, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success: function () {
        // 用户确认分享后执行的回调函数
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      }
    })
  })
  wx.error(function (e) {
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    console.warn(e)
  })
}

// 隐藏微信浏览器右边菜单中的所有非基础按钮接口
export function wxMenuHide () {
  wx.ready(function () {
    wx.hideAllNonBaseMenuItem()
  })
  wx.error(function (e) {
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    console.warn(e)
  })
}

3.在路由表标记需要分享的页面和具体自定义分享的标题，描述，图片：

const routerMap = [
  {
    path: '/',
    component: () => import('@/views/home'),
    meta: {
      title: '首页',
      keepAlive: true,
      isShare: true,
      shareName: '微信自定义分享',
      shareDesc: 'Vue微信自定义分享时安卓系统config:ok，ios系统config:invalid signature签名错误，或者安卓和ios分享时均config:ok但是分享无效的解决办法',
      shareImg: 'https://xxx.png'
    }
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home'),
    meta: {
      title: '首页',
      keepAlive: true,
      isShare: true,
      shareName: '微信自定义分享解决了吗？',
      shareDesc: '这些都是实测有效才发布的文章，希望可以帮到你们！',
      shareImg: 'https://xxx.png'
    }
  },
  {
     path: '/name',
     name: 'name',
     component: () => import('@/views/name'),
     meta: {
       title: '详情页',
       keepAlive: true,
       isShare: false
     }
  }
]

4.在路由守卫写入函数：

import { isAndroid } from '@/utils/util'
import { getWxConfig, wxShare, wxMenuHide } from '@/utils/wechatConfig'

router.afterEach((to, from) => {
  /** 这段是我判断项目正式服和测试服路径的代码，请根据实际拼接自己项目链接路径 **/
  let path = getPublicPath().replace(/\//g, '')
  let environment = process.env.NODE_ENV
  let version = process.env.VUE_APP_VER
  let FRONT_BASE
  if (environment === 'production' && version === 'prod') {
    FRONT_BASE = `${location.protocol}//${location.host}`
  } else if (environment === 'production' && version === 'test') {
    FRONT_BASE = `${location.protocol}//${location.host}/${path}`
  } else {
    FRONT_BASE = `${location.protocol}//${location.host}`
  }
  let url = FRONT_BASE + to.fullPath
  /** 这段是我判断项目正式服和测试服路径的代码，请根据实际拼接自己项目链接路径 **/
  if (isAndroid()) { // 非ios设备，切换路由时候进行重新签名
    getWxConfig(url)
  } else { // ios设备，刷新页面进行重新签名
    if (window.entryUrl === '' || window.entryUrl === undefined || window.entryUrl === null) {
      window.entryUrl = url
    }
    if (window.entryUrl !== url) {
      window.entryUrl = url
      window.location.replace(url)
    } else {
      getWxConfig(window.entryUrl)
    }
  }
  if (to.meta.isShare) {
    wxShare(to.meta.shareName, to.meta.shareDesc, url, to.meta.shareImg)
  } else {
    wxMenuHide()
  }
})

   注：如果按照上面的写法依然无法解决二次分享失败的问题，请在需要自定义分享的页面初始化后再次触发wxShare()方法，这样就能多次分享成功。

 

     以上就是详细的解决方案，亲测有效，希望能帮到大家。

     如需转载请注明出处：https://www.cnblogs.com/zishang91/p/10755488.html，以便有错误可以及时修改，若有错漏不足之处，请见谅并且指点，谢谢！！！