微信自定义分享首先需要绑定安全域名,分享的网页地址必须也是绑定的安全域名下的网址。
微信JS-SDK说明文档:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
1.引入jquery和微信js文件
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
2.新建一个weixin.php文件,用于获取signature签名等信息:
//curl获取请求文本内容 function get_curl_contents($url, $method ='GET', $data = array()) { if ($method == 'POST') { //使用crul模拟 $ch = curl_init(); //禁用https curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); //允许请求以文件流的形式返回 curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data)); curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30); curl_setopt($ch, CURLOPT_DNS_CACHE_TIMEOUT, 30); curl_setopt($ch, CURLOPT_URL, $url); $result = curl_exec($ch); //执行发送 curl_close($ch); }else { if (ini_get('allow_fopen_url') == '1') { $result = file_get_contents($url); }else { //使用crul模拟 $ch = curl_init(); //允许请求以文件流的形式返回 curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE); //禁用https curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($ch, CURLOPT_URL, $url); $result = curl_exec($ch); //执行发送 curl_close($ch); } } return $result; } //获取微信公从号access_token function wx_get_token() { $AppID = 'wx6aa68ee6af215293';//AppID(应用ID) $AppSecret = '1dcf4c9ac64e31d5aaf0105a80346e30';//AppSecret(应用密钥) $url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$AppID.'&secret='.$AppSecret; $res = get_curl_contents($url); $res = json_decode($res, true); //这里应该把access_token缓存起来,至于要怎么缓存就看各位了,有效期是7200s return $res['access_token']; } //获取微信公从号ticket function wx_get_jsapi_ticket() { $url = sprintf("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=%s&type=jsapi", wx_get_token()); $res = get_curl_contents($url); $res = json_decode($res, true); //这里应该把access_token缓存起来,至于要怎么缓存就看各位了,有效期是7200s return $res['ticket']; } $wx = array(); //生成签名的时间戳 $wx['timestamp'] = time(); //生成签名的随机串 $wx['noncestr'] = uniqid(); //jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。 $wx['jsapi_ticket'] = wx_get_jsapi_ticket(); //分享的地址,注意:这里是指当前网页的URL,不包含#及其后面部分,曾经的我就在这里被坑了,所以小伙伴们要小心了 $wx['url'] = $_GET['url']; $string = sprintf("jsapi_ticket=%s&noncestr=%s×tamp=%s&url=%s", $wx['jsapi_ticket'], $wx['noncestr'], $wx['timestamp'], $wx['url']); //生成签名 $wx['signature'] = sha1($string); echo json_encode($wx);die; /* 注意事项 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。 签名用的url必须是调用JS接口页面的完整URL。 出于安全考虑,开发者必须在服务器端实现签名的逻辑。 */
3.在模板页添加以下js代码:
<script> timestamp = ''; noncestr = ''; signature = ''; $(function(){ $.ajaxSettings.async = false; //重要:开启同步 var url = window.location.href.split('#')[0]; //请求第二步添加的php文件获取timestamp、noncestr、signature等信息 $.getJSON("weixin.php",{url:url},function(data){ timestamp = data.timestamp; noncestr = data.noncestr; signature = data.signature; }); wx.config({ debug: false, appId: 'wx6aa68ee6af215293', //填写你的appid timestamp: timestamp, nonceStr: noncestr, signature: signature, jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] }); wx.ready(function (){ //获取“分享给朋友”按钮点击状态及自定义分享内容接口 wx.onMenuShareAppMessage({ title: '你要分享的标题', desc: "描述", link: '分享的链接', imgUrl: '缩略图', trigger: function (res) { }, success: function (res) { }, cancel: function (res) { }, fail: function (res) { } }); //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口 wx.onMenuShareTimeline({ title: '', // 分享标题 desc: '', //描述 link: '', // 分享链接 imgUrl: '', // 分享图标 success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }); }); }); </script>
很多时候分享不成功,原因是生成签名的错误,可以通过“微信 JS 接口签名校验工具”来测试:
http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
也可以下载下面的微信官方提供的DEMO