最近做 H5 集成微信分享踩了很多坑，多少辛酸泪只有经历了才能体会，仅以此篇文章记录其中的酸甜苦辣。
分享出去的效果大概是这样子的：
接到这个需求之后，因为之前也没有做微信相关开发的经验，于是查阅了一些方案之后，最终决定采用 JS-SDK 来做。于是很愉快的打开微信官方开发文档，仔细阅读了需要用到的相关接口和注意事项。于是有了第一个版本的代码：
async mounted() {
const { data, ok } = await this.$ajax.post({
url: ’这是请求的api地址‘,
data: {
url: window.location.href.split('#')[0],
},
})
let wxConfig = {}
if (ok) {
wxConfig = data
}
const { signature, nonceStr, timestamp } = wxConfig
const wx = await import('weixin-js-sdk')
wx.config({
appId: 'xxxxxxxx',
signature,
nonceStr,
timestamp,
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'],
})
wx.ready(() => {
const shareConfig = {
title: ’这是标题‘,
desc: ’这是描述‘,
link: ’这是分享链接‘,
imgUrl: ’这是分享卡片的图片地址‘,
}
wx.updateAppMessageShareData(shareConfig)
wx.updateTimelineShareData(shareConfig)
})
},不出意外地，分享出去的链接并没有按照自定义来进行解析，于是打开了调试模式，一直报 invalid signature签名错误，根据官网的提示，逐个检查了可能会出现错误的地方。
易错点1：网上有说虽然微信官方说旧的分享接口即将废弃，但是也没有说具体的废弃时间，微信底层可能还是调用了旧的接口。于是我把旧的分享接口也加上了，但依然还是报签名错误。
易错点2: 网上说可能是新的分享接口新版的微信还不支持，需要给引入的 sdk 降一下版本，于是我尝试把 weixin-js-sdk 降到了1.0.0，和微信官方给的示例同一版本，结果依然不行。
易错点3: 用来给后端签名的 url 是否是正确的。按照官方文档的提示，确保了用来签名的 url 的准确性，结果依然不行。
易错点4：可能是后端的签名算法不对，于是在前端测试签名，发现签名是成功的，但是还是报签名错误。
易错点5: 有可能是浏览器不支持分享 api 的原因，于是调用了微信提供的 checkJsApi, 判断当前客户端版本是否支持指定 JS 接口，依旧报签名错误。
我木讷了。差一点就去找微信客服了，结果，在 mentor 的帮忙下，最后发现是测试环境的问题，上面的代码在安卓上分享是没有问题的，折腾了好几天，心情终于能够平复一点了。结果，就在这时，测试同学给我反馈到 ios 上分享是失败的。啊啊啊，这么刺激的吗，有了上面的折腾的经历，开始仔细分析 ios 的问题，于是发现 ios 跟 Android 上是不一样的。ios 上需要手动封装一下签名的 url。因为 ios 微信无法追踪到 history 模式的路由变化，所以这里传的 URL 应该是第一次进入 APP 的页面路径，安卓没有这个问题，需要每次进入 APP 时把第一个页面的 URL 存下来给 iOS 用，我这里是保存在 vuex 的, 传递给后端签名的 url 需要判断一下，核心代码如下：
const isIOS = /iPad/iPhone/iPod/i.test(navigator.userAgent)
const url = isIOS ? window.location.origin + store.state.wechat.jsUrl: window.location.href.split('#')[0]终于，在 ios 上也能够进行自定义分享了。
总结：我使用的微信版本(7.0.19), 最新微信分享接口也是支持的。当时做这个微信分享的时候还有一个误区，我自己的手机是小米的，我发现只有小米自带的浏览器可以支持分享，Chrome 浏览器就不能进行解析，先前以为是浏览器的原因，后面得大神指点，微信分享是只跟微信有关系的，在微信浏览器里才能解析微信分享相关的 api，我的小米自带浏览器能够解析，是因为小米跟微信是有合作的，所以是支持的。其他手机也有一些浏览器是能够支持的。