H5微信分享接口开发JS-SDK PHP［附源码］

背景

H5开发中几乎所有项目都要用到自定义分享，见过的分享接口有php引入和ajax调用两种，使用不方便且对代码环境有要求。故共享一版可通过javascript文件引入方式来实现自定义分享的接口（这是15年底做的接口，一直在使用，如果有更简单便捷的方法欢迎交流）。

使用这个接口，不管你是php开发的项目还是纯前端的html项目，不管是把代码放服务器还是放到OSS CDN，都是OK的，是一件一劳永逸的事情。

实现方法

根据微信JS-SDK开发文档，实现分享主要有几个步骤：步骤一，绑定域名。步骤二，引入JS文件。步骤三，权限验证。步骤四，设置自定义分享信息。

首先是要有一个认证的微信公众号，进入公众号设置／功能设置／JS接口安全域名，填入项目域名。然后就是第三步，用接口实现权限验证。

这里不探讨具体的实现方法（实现已封装到jssdk.php文件），只说明接口配置和项目调用方法。

接口配置只需填写公众号AppID、AppSecret两个参数，

require_once "jssdk.php";
$jssdk = new JSSDK("AppID", "AppSecret", $url); // 公众号AppID、AppSecret
$signPackage = $jssdk->GetSignPackage();
echo "var signPackage=";
die(json_encode($signPackage)); // 返回微信分享所需参数

项目调用接口更方便，只需在index.html里通过javascript引入接口地址即可，

<script>document.write("<script src='accessToken/signPackage.php?originUrl=" + window.location.href + "' type='text/javascript'><\/script>");
</script>
<script>var baseUrl = "http://xxx.com/";       // 项目地址var wxData = {"imgUrl" : baseUrl + 'share.jpg',  // 分享图标"link"   : baseUrl,                // 分享地址"title"  : '微信分享接口-分享标题',   // 分享标题"desc"   : '分享文案'               // 分享文案};wx.config({debug: false,appId: signPackage.appId,timestamp: parseInt(signPackage.timestamp),nonceStr: signPackage.nonceStr,signature: signPackage.signature,jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']});wx.ready(function () {wx.onMenuShareTimeline({title: wxData.title,link: wxData.link,imgUrl: wxData.imgUrl,success: function () {}});wx.onMenuShareAppMessage({title: wxData.title,desc: wxData.desc,link: wxData.link,imgUrl: wxData.imgUrl,type: 'link',dataUrl: '',success: function () {}});});
</script>

Demo二维码

源码下载地址

https://download.csdn.net/download/gaofei880219/10383643

参考链接

微信JS-SDK说明文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

微信JS SDK PHP Demo：http://www.cnblogs.com/txw1958/p/weixin-js-sdk-php-demo.html

------------------------------- 时间分界线：2018.6.26 -------------------------------

最近一个项目投放微信朋友圈，代码部署腾讯服务器，用到负载均衡共4台IP不同的服务器。那么问题来了，分享接口代码部署到4台服务器，用于存储access_token和jsapi_ticket缓存的json文件在不同的地方，那签名过期重新生成数据必定不同而导致分享配置出错。

解决思路，把access_token和jsapi_ticket缓存到一个固定的地方，分享接口都去调用这个地方的签名缓存文件。

具体实现，使用阿里云的RDS云数据库，上面的问题得以解决，而且也能应对高并发。

数据表设计，如下图：

代码实例见 https://github.com/YanKaiwei/Demo/tree/master/shareDemoRDS