h5 微信分享上遇到的问题记录

首先最基本的配置就不在这里赘述了，网上有很多写的非常详细的文章，这里放一篇
vue使用微信JS-SDK实现分享功能

上面讲的还是比较详细的，大部分问题也有涉及到。

我在使用过程中遇到的问题

1. ios 微信分享失败，安卓没问题，原因大致有以下几点：
   1.1. ios在微信分享中如果路由带有中文参数，必须用encodeURIComponent对中文参数进行编码
   1.2. 分享的缩略图不能大于32K的（现在好像已经没有这个限制了，但还是越小约好吧
   1.3. ios 端请求签名的路由必须是一个完成路由且为刚进入页面时的第一个路由地址！！！划重点，被这个坑了好久好久

   因为我的项目在分享时是分渠道的所以我进入页面时的路由为：
   xxxxx.com/test/?qd=123 这样一个链接， 然而这个链接是错误的，最终把根目录 / 改成 /home 解决，第一次进入的路由就变为 xxxxx.com/test/home?qd=123，然后终于分享成功了！！！

// app.vue 在刚进入页面时做了处理
const userAgent = navigator.userAgent
if (!!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
  let url = location.href.split('#')[0]
  sessionStorage.setItem('originUrl', url) // 用于ios分享
}

// other.vue 在其他页面要去请求签名时对请求的 url 做区分处理
// ios 就取刚进入时存的路由就可以了，安卓就取当前的路由就行
const ua = navigator.userAgent
let url = null
if (!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
  url = sessionStorage.getItem('originUrl')
} else {
  url = window.location.href.split('#')[0]
}

2. 在第一个问题得意解决之后原以为大功告成的我兴冲冲的测试，然而却发现分享两个渠道的页面点进去之后居然会串起来…

   找了好久之后才发现，微信分享的页面是要分享当前页面的！！！比如说你在 xxx.com/test/login 点击了分享，而你分享的链接是 xxx.com/test/home?qd=123

   在正式测的时候你就会发现他第一次进入的路由还是 xxx.com/test/login，就更别谈获取什么渠道了，这个也是找了很久之后才找到的问题，最后改为分享的链接就是当前路由拼接上渠道来作区分，最后也终于啃下了这块骨头。

一点小经验，希望能帮到大家