微信公众平台分享-踩坑记

2018-04-04  本文已影响0人  清风徐云去
1.png

虽然微信公众号平台出来那么久了,但是被程序猿们吐槽的声音却一直没有减少过,作为趟坑大军中的一员,在这里记一下自己遇到过的问题吧。

按照惯例,传送门微信公众平台

1.通过config接口注入权限验证配置
2.png

虽然前面写了通过前端来获取并生成相关数据,但是一般情况下,这些数据是后端来实现,前端通过请求获取相关数据赋值进行验证的。
在这个步骤里,最常见的错误是config:invalid signature,原因是签名算法中的url与wx校验时的url不一致。静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取,而且需要encodeURIComponent,后台decodeURIComponent解码),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。

2.通过ready接口处理成功验证
3.png

这个其实也算不上坑,只是自己在刚刚接触的时候,不是很理解,导致在使用的时候没有使用ready,导致接口调用不成功。

3.分享接口
4.png
当config验证通过,checkJsApi检查的接口OK的,接口也是写在ready方法里了,但是在设置分享的时候老是失败时,这个时候要检查接口里的link,imgUrl的路径了。按照官方的说明,link分享的链接必须与当前页面对应的公众号JS安全域名一致,说白了,就是在同一个域名下,imgUrl也是一样,否则导致分享不成功。
4.Reference error wx is not defined错误
5.png

遇到这个问题的时候,百度给出的很多答案都是jweixin-1.0.0.js与其它某js冲突,给出的解决办法有两个,一个是重置definerequire

<script type="text/javascript">
    define = null;
    require = null;
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript">
</script>

一个是把引入的jweixin.js文件提前。
在处理的时候发现,方法一对自己的项目无效,方法二有效,但是还是会出现Reference error wx is not defined这个错误。
排查的时候发现,其实不是冲入的问题,而是jweixin.js文件引入加载时间太长,导致下面的script标签里调用wx.config的时候没有找到这个方法,从而报错。

6.png
7.png
5.签名算法
8.png

这里要讲的其实不是自己的坑,而是自己背的锅。后端同事在写签名算法的时候,没有按照官方给出的关键词拼接,

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

这里面的noncestr,jsapi_ticket,timestamp,url一个都不能改

导致自己请求的数据一直验证不通过,以为是自己的问题,当晚加班了几个小时解决这个问题,从头到尾排查几遍,查了半天,看了一下后端同事的算法代码,瞬间哭晕了=-=~~~,把timestamp写成了times,改回来后,验证就通过了。

6.iOS系统及微信中不支持audio自动播放问题
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 
<script> 
     //一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以 
     document.getElementById('idName').play(); 
    //微信必须加入Weixin JSAPI的WeixinJSBridgeReady才能生效 
    document.addEventListener("WeixinJSBridgeReady", function () { 
        document.getElementById('idName').play(); 
        document.getElementById('video').play(); //视频自动播放
    }, false); 
</script>

暂时就这些吧,后期遇到其它的继续补充。

----------END----------
上一篇 下一篇

猜你喜欢

热点阅读