前言:

最近用VUE全家桶在做微信分享的时候碰到了许许多多的坑,在这边总结一下。

微信分享的时候, 要获取当前页面的URL,通过URL获取签名,不懂的可以看微信文档:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

坑1:

微信分享会自动屏蔽掉#后面的参数***且#后面的参数不参与签名***

如果你采用的是Hash模式的话,url中会带着 #,这时候只要获取到#之前的url就可以了

window.location.href.split(’#’)[0]

坑2

只之后我们决定采用History模式,去掉# ,BUT,去掉#之后,在经过后端配置之后,前台白屏,报错等一系列问题,这边列了两个解决方法的链接,可以参考一下。

http://www.cnblogs.com/zhuzhenwei918/p/6866094.html

坑3:

在ios模式下,微信分享的时候,跳转页面后总是签名报错。

但是,刷新之后你会发现签名又可以了,记得打开微信config的debug模式查看。

其实,你可以看下你当前的url(复制当前页面链接),和你用来获取签名的url是否一致,如果不一致,微信后台就会签名报错。

为什么跳转路由之后才会签名失败呢。
这边提供一个解决问题的链接,可以参考:
https://segmentfault.com/a/1190000014455713
总的来说,就是VUE框架且ios下,微信只会记录你第一次进入到页面的url。只会尽管你的路由发生了跳转,但是并没有触发微信更新当前的url的函数,所有,你获取到的url和你当前实际的url不一致才导致签名失败,解决的办法在链接中都详细说明了。
顺便说下,安卓没有这个问题

坑4

安卓自定义分享失败
由于我采用的是微信最新版本的jssdk,1.4.0版本的,存在一定的问题,就是安卓无法自定义分享。
解决的办法就是检测当前客户端是Ios还是安卓,如果是Ios就采用最新的方法,如果是安卓就用旧版本,但是听说旧版即将被废弃。。
贴上代码:

   if(/(Android)/i.test(navigator.userAgent) ){
        alert('安卓')
        wx.onMenuShareAppMessage(shareData1) //分享朋友
        wx.updateAppMessageShareData(shareData1); //分享朋友
      }else{
        alert('IOS')
        wx.updateTimelineShareData(shareData2); //分享朋友圈
        wx.onMenuShareAppMessage (shareData2); //分享朋友圈
      }

希望对大家有帮助。

Logo

前往低代码交流专区

更多推荐