门户网站建设合同提高搜索引擎检索效果的方法

最近做 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 } = wxConfigconst 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，我的小米自带浏览器能够解析，是因为小米跟微信是有合作的，所以是支持的。其他手机也有一些浏览器是能够支持的。