Vue - IOS公众号分享签名失败

最新推荐文章于 2024-11-05 11:25:22 发布

原创最新推荐文章于 2024-11-05 11:25:22 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了解决iOS微信分享时出现签名错误的方法，通过在第一个页面index.vue中添加路由守卫来保存初始URL，以适应iOS和安卓平台不同的URL需求。

微信公众号分享功能，安卓成功，ios出现签名错误。区别在于发送给后台做验证的url不同，安卓需要发送当前页面的url，ios需要发送进入的第一个页面的url，所以需要将第一个页面的url保存起来

我的第一个页面是index.vue，添加路由守卫

beforeRouteEnter (to, from, next) {
  let userAgent = navigator.userAgent

  if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
    sessionStorage.setItem('originUrl', location.href)  // 用于ios分享
  }

  next()
},

在需要用到的分享的地方调用share函数

// 分享
async share () {
  let userAgent = navigator.userAgent
  let url = ''

  if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
    url = sessionStorage.getItem('originUrl')
  }
  else {
    url = location.href
  }

  let data = await app.request(api.wechatJssdk, {url: url})
  
  if (data.code === 1) {
    let parmas = data.data.data

    wx.config({
      debug: false,
      appId: parmas.appId,
      timestamp: parmas.timestamp, 
      nonceStr: parmas.nonceStr,
      signature: parmas.signature,
      jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage']
    })
      
    wx.ready(() => {
      let obj = {
        title: '',
        desc: '',
        link: '',
        imgUrl: '',
        success: () => {

        }
      }

      // 新api，不会有分享成功的回调，success只是设置成功回调
      // wx.updateAppMessageShareData(obj)
      // wx.updateTimelineShareData(obj)

      // 旧api，即将废弃
      wx.onMenuShareTimeline(obj)
      wx.onMenuShareAppMessage(obj)
    })
  }
},