微信网页自定义分享踩坑日志

4,379 阅读5分钟

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。这就会导致我们从链接中拿参数时会出问题。但是它还是有规律的。它是在?号前面插入自己的参数的。所以我们的参数就是最后一个?号后面的参数(下面代码只是说明下思路,具体应用肯定是要判断多种情况的,从URL地址获取参数这些基本技能就不用说了):

    let paramsArray = window.location.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,并且有些会被废弃的,只是给大家提个解决问题的思路。有问题望指正。