0, 先上主要内容
入坑
在微信网页开发中, 使用 JSSDK 自定义分享内容. 按官方文档去弄, 然后出现的问题是: iOS 手机自定义分享正常, 而安卓手机自定义分享不生效, 但是 wx.config 之类的配置都是 ok. 我使用的 JSSDK 版本是 1.4.0. 分享 API 是 updateAppMessageShareData.
另外再提一下. 使用最新的分享 API 时, 微信会自动在我们的分享链接后面加参数, 这会导致我们传递参数时, 解析会出问题. 比如我们配置的链接是: https://test.com?id=11. 当分享后, 链接变成了: https://test.com?from=singlemessage ?id=11. 这就会导致我们从链接中拿参数时会出问题. 但是它还是有规律的. 它是在? 号前面插入自己的参数的. 所以我们的参数就是最后一个? 号后面的参数:
- let paramsArray = Windows.loaction.href.split("?");
- let myParams = paramsArray[paramsArray.length -1]; // 我们的参数在这里
填坑
最后发现是由于使用了最新版本库的新的分享 API 造成的, 在微信社区中也有人提出, 但现在还是未解决的. 所以唯一方法就是不要使用的版本和新的分享 API. 建议使用 1.3.3 版本的 onMenuShareAppMessage. 官方文档提醒大家这几个旧的 API 即将废弃. 但是由于新的 API 的不稳定, 以及没有说明具体时间, 废弃之前的 API 还是有段时间的. 所以如此出现和我一样的问题, 安卓手机无法自定义分享, iOS 手机可以, 或者其他问题, 大家试试是不是版本问题, 给大家提供个思路, 供参考
看到这里, 你就完全了解这篇文章的主要内容了. 如果你时间宝贵, 可以就此离开了. 如果你有兴趣, 可以继续听听我讲故事.
下面正式开始讲故事
一, 入坑过程
在最近开发的项目中, 有个微信自定义分享功能, 因为之前也做过微信网页开发, 就觉得小 case, 引入 JSSDK, 后端提供配置接口, 调用 wx.config 配置下 SDK, 在 wx.ready 中配置需要用到的 API 比如分享给微信好友, 搞定.
开始干活, 毕竟上次开发微信网页也隔了快一年的, JSSDK 版本都不知道更新多少了, 先去官网看看文档 微信 JS-SDK 说明文档 . 乍一看, 版本都到 1.4.0. 这次功能主要用到分享接口, 跳到分享接口看看
请注意, 原有的 wx.onMenuShareTimeline,wx.onMenuShareAppMessage,wx.onMenuShareQQ,wx.onMenuShareQZone 接口, 即将废弃. 请尽快迁移使用客户端 6.7.2 及 JSSDK 1.4.0 以上版本支持的 wx.updateAppMessageShareData,updateTimelineShareData 接口.
原有的 wx.onMenuShareTimeline,wx.onMenuShareAppMessage,wx.onMenuShareQQ,wx.onMenuShareQZone 分享接口即将被废弃, 取而代之是 wx.updateAppMessageShareData,updateTimelineShareData. 同时进行了合并, 分享给微信好友和分享到 QQ 好友合并成了一个接口, 分享到朋友圈和分享到 QQ 空间合并成了一个接口.
这样情况下, 肯定是要用 1.4.0 版本, 并且用最新的 API.
按照官方文档, 接下来就是一波猛如虎的操作, 然后在自己的 iOS 手机上自测没问题就提测了
tip: 这其中要求分享链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致. 因为接口也可能是同个域名, 为方便本地测试, 使用了 charles 的 map remote 进行代理, 方便本地开发
二, 发现问题
我只在自己的 iOS 手机测试过没问题, 提测后, 测试同学发现, iOS 自定义分享没问题, 安卓手机自定义分享到微信好友, 微信空间就有问题. 而且安卓手机分享到 QQ 分享到 QQ 空间都没问题.
总结坑就是: 安卓手机分享到微信好友, 微信空间不行. 其他分享都可以
三, 填坑
一直对自己写的代码自信满满, 听到测试同学提说有 bug, 还不信, 自认为是环境问题. 后来发现, 我是小看了微信, 微信开发自古坑多, 还是得乖乖去找找是什么问题造成的
首先打开调试模式
发现 wx.config 返回 ok, 相关 API 配置也是返回 ok, 这说明 JSSDK 以及相关接口的配置时没问题的啊.
然后, 从头开始排查, 配置先写死, 按文档写个最标准的试试, 还是还行.
接下来, 就是各种 google 了, 有人提过相应的问题, 在微信开发社区也有同志反馈了 (2018-09-29), 而且也有官方人员出来回答了, 但最后还是没有答案.
最后, 就是取看那些自定义分享成功的 demo. 我一看, 没区别啊, 再仔细看, 突然发现那些成功的 demo 用的 API 和我用的不同, 这下有点想法了, 莫非是版本问题? 好, 接下来又是一波猛如虎的操作, 降个版本用 1.3.3. 然后测试下, 果然都可以, 然后提测让测试同学测也都通过了. 果然是最新的 API 不稳定.
四, 总结
1, 微信 JSSDK 现在最新版本 1.4.0. 首先它对微信客户要求是 6.7.2. 这个相对要求还是有点高
2, 其次, 最新的版本稳定性还是有待考察的
3, 在使用到外面公共库, 得留意下相关版本问题, webpack/NPM 也经常由于版本而出问题
一言以蔽之, 就是由于使用了最新版本 JSSDK 以及相关 API 导致安卓手机无法自定义分享, 使用低版本库以及 API 就可以了.
注意, 写这篇文章是 2019-01-08, 之后微信可能会修复这个问题, 到时就可以考虑使用新的 API, 并且有些会被废弃的, 只是给大家提个解决问题的思路. 有问题望指正.
来源: https://juejin.im/post/5c34bbfaf265da616e4c9dd2