微信公众平台JSSDK分享接口开发（PHP实现）

最近作个移动端的H5应用，要实现自定义微信分享功能，实现过程当中遇到一些小小的坑，这里分享一下。

之前微信官方是没有正式支持微信分享的自定义接口（包括图片、标题、描述）的，然而有一些大神找到了WeixinJSBridge这个强大的“对象”，一个方法调用就垂手可得地实现了分享功能。

后来微信放出了JSSDK，开始对H5端提供丰富、强大的官方接口支持，WeixinJSBridge也逐渐淡出了开发者的视野。

然而这个JSSDK的调用方法，实现起来却并非太容易。难点不在于技术上，而是业务流程上。虽然是一个前端的接口，可是为了安全性，微信要求开发者进行服务端的验证，而这个验证居然还要分两步来进行……如此一来，对于仅仅是想要实现一个“分享到朋友圈”功能的人来讲，真是有点叫人吐血。

事实上呢，这个后端的两步验证，对于熟悉微信开发流程的人来讲，也是很合理的。由于第一步，获取“AccessToken”，是全部微信业务的起点；而第二步，获取JSApi的签名，才是使用JSSDK对应的需求。若是说项目上原本就针对微信进行了一些开发，这点需求应该是能够很快解决了。

好了，废话到此结束，下面说后端接口具体实现步骤。接口的实现是基于PHP语言的，PHP的语法简单明了，相信各位不熟悉这门语言的同窗应该可以理解；代码已经托管在OSChina上开源共享，能够下载使用；连接见文章末尾。

第一步，官方文档是必定要细读的。而后你的微信公众号已经经过认证，这点是不用提醒的吧？

第二步，绑定安全域名。公众号后台左菜单 -> 设置 -> 公众号设置 -> 功能设置 -> JS接口安全域名。注意这里填写顶级域名的话，对其全部子域名都是有效的。因此为了有效利用三个名额，最好直接填写顶级域名。

第三步，写代码了。这里虚拟了一个项目，包括前端和服务端的实现。

代码：http://git.oschina.net/w2ex/snipets/tree/master/weixinapi
演示：http://snipets.willizm.cn/weixinapi/webapp/

项目目录结构：

/
/data     数据目录，用来存放微信端获取到的AccessToken和Ticket数据
/lib      
/lib/Weixin.class.php 微信接口类库
/webapp   前端示例
/webapp/index.html
/webapp/main.js
/api.php  服务端接口示例，这里演示了对jsonp的支持
/config.php  配置文件，包括appId、appSecret、数据目录，顺带支持SAE环境
/callback.php   微信回调接口，代码直接拷贝<a href="http://mp.weixin.qq.com/mpres/htmledition/res/wx_sample.20140819.zip" data-mce-href="http://mp.weixin.qq.com/mpres/htmledition/res/wx_sample.20140819.zip">微信文档中的Demo</a>

重点在于Weixin.class.php中三个方法的实现：getAccessToken、getTicket、createSignature。这三个方法各自有一些注意事项，前面两个都要求用户在服务端缓存微信接口返回的数据，所以在每次调用时都要检查一下是否已通过期；第三个方法则有两点容易犯低级错误：其一，前端传过来的url是不须要hash部分（就是#及其后面的一段）的，这个前端须要注意；其二，服务端签名算法中拼接字符串时nonceStr是所有小写的，应写成noncestr，再就是要注意拼接的顺序不能错。

前端部分，除了上面说的传递url时须要去掉hash外，还需注意，业务逻辑应尽量wx.ready中调用，以免网络延迟带来的问题。开发调试时记得开启调试选项，这样就能够根据弹出的错误码来对照文档排查问题。