解决微信H5自定义分享在IOS下失效的问题（js-sdk: invalid signature）

在H5页面要做一个自定义分享，所以用到了微信的 js-sdk 。安卓下没问题，IOS报错 invalid signature 网上查了许多其他人写的答案，按照其他人说的改动之后还是不行，故总结下来以便后人。

大家先按照其他人的方法排查，如果还不好使再看我的做法。

经过一番根据官方文档的配置，最终config如下

let href = location.href.split('#')[0]
let wxSetting = sign(jsapi_ticket, href) // 前端签名
wx.config({
      debug: false, // 开启调试模式
      appId: 'wx20fXXXXXXXX54a', // 必填，公众号的唯一标识
      timestamp: wxSetting.timestamp, // 必填，生成签名的时间戳
      nonceStr: wxSetting.nonceStr, // 必填，生成签名的随机串
      signature: wxSetting.signature,// 必填，签名
      jsApiList: ['checkJsApi', 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表
    });

这里是采用了前端签名的方式，官方推荐还是后端签名，不用在意。

设置好以后在安卓端没有问题，但是在IOS下会报错：

invalid signature签名错误

首先排除签名算法不正确，因为安卓端就没问题啊。

最后找了半天，原因如下：

IOS：每次切换路由，SPA的url是不会变的，发起签名请求的url参数必须是当前页面的url(就是最初进入页面时的url)

Android：每次切换路由，SPA的url是会变的，发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的)

原来是IOS的location.href取值不正确，所以需要做如下单独配置

let href = location.href.split('#')[0]
    if ( brType.iPhone ) {
      // 微信IOS的浏览器在history模式下需要使用刚进页面的url
      href = getSessionItem('firstHref')
    }

在微信浏览器刚进入页面的时候就要在session里存一下地址，也就是在app.js里加入下面的代码。

  componentDidMount() {
    // 把地址存入 sessionstorage 里面
    setSessionItem( 'firstHref', location.href )
  }

 

在调用授权的时候，url用存起来的地址。

// 从sessionStorage里取值
href = getSessionItem('firstHref')

问题解决。

想知道微信IOS端的问题原因以及详细信息，可以点击这里或者这里查看。下面是签名的完整代码

Request({
    url: `/user/wechat/get_jsapi_ticket`,
    method: 'GET'
  }).then((res) => {
    let jsapi_ticket = res.data.ticket // 获取后端传来的jsapi_ticket
    let href = location.href.split('#')[0] // 安卓下直接用默认的当前页面地址
    if ( brType.iPhone ) {
      // 微信IOS的浏览器在history模式下需要使用刚进页面的url
      href = getSessionItem('firstHref')
    }
    let wxSetting = sign(jsapi_ticket, href) // 执行签名算法
    console.log(wxSetting)
    wx.config({
      debug: false, // 开启调试模式
      appId: 'wx20XXXXXXXX654a', // 公众号的唯一标识
      timestamp: wxSetting.timestamp, // 生成签名的时间戳
      nonceStr: wxSetting.nonceStr, // 生成签名的随机串
      signature: wxSetting.signature,// 签名
      jsApiList: ['checkJsApi', 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline'] // 需要使用的JS接口列表
    });
    
    wx.error(function(res){
      // config信息验证失败会执行error函数
      console.log('微信config失败：', res)
    });
  })

总结今天遇到的问题，以便后来人继续踩坑(滑稽)