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

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冲突，给出的解决办法有两个，一个是重置define和require

<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>

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

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