微信自定义分享链接信息(标题,图片和内容)实现过程
图片1是普通连接分享,图片2是完成后的有标题,描述,和图片的分享
步骤:
1.去公众号拿到appid和AppSecret 并设置白名单
2.在H5页面中添加如下代码
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script> var url=location.href; $.ajax({ type : "get", url : "http://这里改为你自己的网址.com/sample.php?url="+url,
dataType : "jsonp", jsonp: "callback", jsonpCallback:"success_jsonpCallback", success : function(data){ wx.config({ debug: false, appId: data.appId, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: [ 'onMenuShareTimeline',// 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] }); }, error:function(data){ alert("连接失败!"); } }); wx.ready(function () { var shareData = { title: '这是是分享标题', desc: '这是是摘要', link: url, imgUrl: '这里改为你网站域名下的小图标文件的地址' }; wx.onMenuShareAppMessage(shareData);//分享给好友 wx.onMenuShareTimeline(shareData);//分享到朋友圈 wx.onMenuShareQQ(shareData);//分享给手机QQ wx.onMenuShareWeibo(shareData);//分享腾讯微博 wx.onMenuShareQZone(shareData);//分享到QQ空间 }); wx.error(function (res) { //alert(res.errMsg);//错误提示 }); </script>
url :"http://这里改为你自己的网址.com/sample.php?url="+url,
3.服务端接口代码 去微信官方下载
http://demo.open.weixin.qq.com/jssdk/sample.zip
备注:链接中包含php、java、nodejs以及python的示例代码供第三方参考,第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制。
下载后解压是这样的,然后自己选择合适的,我这边用的是PHP
据说只要把appid和AppSecret 写入就可以直接用了 $jssdk = new JSSDK("wx********************", "*************************");
但是我是使用中遇到了点问题 这边记录下,首先是sample.php这个接口没有给返回 自己加个返回代码,
<?php require_once "jssdk.php"; $jssdk = new JSSDK("你的appid", "你的appsecret"); $signPackage = $jssdk->GetSignPackage(); // return var_dump($signPackage); echo json_encode($signPackage); exit; ?>
然后直接调用这个接口,发现数据可以拿到,但是会报签名错误,
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
使用这个微信提供的签名工具验证的了,是签名的时候拿到的url有误,
然后去计算速度快.php里面GetSignPackage()里面修改了下Url的获取方法
public function getSignPackage() { $jsapiTicket = $this->getJsApiTicket(); // 注意 URL 一定要动态获取,不能 hardcode. $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://"; // $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; $url = $_GET['url'];//这里修改了Url的获取方法 $timestamp = time(); $nonceStr = $this->createNonceStr(); // 这里参数的顺序要按照 key 值 ASCII 码升序排序 $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url"; $signature = sha1($string); $signPackage = array( "appId" => $this->appId, "jsapiTicket" => $jsapiTicket, "nonceStr" => $nonceStr, "timestamp" => $timestamp, "url" => $url, "signature" => $signature, "rawString" => $string ); return $signPackage; }
到这里就完成了,记录下自己的经历,可能有遗漏的地方,如果不能用请留言
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script> var url=location.href; $.ajax({ type : "get", url : "http://这里改为你自己的网址.com/jssdk.php?url="+url, dataType : "jsonp", jsonp: "callback", jsonpCallback:"success_jsonpCallback", success : function(data){ wx.config({ debug: false, appId: data.appId, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: [ 'onMenuShareTimeline',// 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] }); }, error:function(data){ alert("连接失败!"); } }); wx.ready(function () { var shareData = { title: '这是是分享标题', desc: '这是是摘要', link: url, imgUrl: '这里改为你网站域名下的小图标文件的地址' }; wx.onMenuShareAppMessage(shareData);//分享给好友 wx.onMenuShareTimeline(shareData);//分享到朋友圈 wx.onMenuShareQQ(shareData);//分享给手机QQ wx.onMenuShareWeibo(shareData);//分享腾讯微博 wx.onMenuShareQZone(shareData);//分享到QQ空间 }); wx.error(function (res) { //alert(res.errMsg);//错误提示 });</script>