最近在为网站添加微信分享带图片,描述的功能,这个功能之前了解过,但并没有彻底实现过,这个功能需要认证的公众号支持。
第一步:在已经认证的公众号配置安全域名(网上很多教程)
第二步:在微信公众平台文档获取示例源码,阅读文档,如果时间紧迫可直接阅读源码
第三步:阅读源码并按需求修改源码
源码文档结构如下:
由于网站采用mvc结构,并不能像sample.php那样调用jssdk.php,一开始,我是想直接使用
<script type="text/javascript" src="xxxxxxx/sample.php"></script>
即将sample.php当成javascript,但后来想了一下,这样做可能会有被跨域调用的风险,还是乖乖地使用ajax方式调用。
这里我先说明一下我遇到的问题,因为debug模式下可能一直弹出wx.config配置不正确的问题
1、先到微信公众号后台查看一下你有没有获取到分享接口的权限,
2、查看一下你的url有没有写死
3、查看一下你的传入的url是不是当前网页的url,否则会报错
代码展示
这里我们需要修改一下代码:
先上代码:
jssdk.php(只需修改getSignPackage方法,由于url不能hardcode,所以url作为参数传入)
//添加参数,$url由ajax传过来
public function getSignPackage($url) {
$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]";//注释这行
$timestamp = $this->now;
$nonceStr = $this->createNonceStr();
// 这里参数的顺序要按照 key 值 ASCII 码升序排序
$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
$signature = sha1($string);
$signPackage = array(
"appId" => $this->appId,
"nonceStr" => $nonceStr,
"timestamp" => $timestamp,
"url" => $url,
"signature" => $signature
);
return $signPackage;
}
getwxconf.php接收ajax数据并返回wx.conf配置所需数据(json格式)
define('DT_DEBUG', 0);
if(DT_DEBUG) {
error_reporting(E_ALL);
$mtime = explode(' ', microtime());
$debug_starttime = $mtime[1] + $mtime[0];
} else {
error_reporting(0);
}
if(isset($_REQUEST['GLOBALS']) || isset($_FILES['GLOBALS'])) exit('Request Denied');
@set_magic_quotes_runtime(0);
$MQG = get_magic_quotes_gpc();
foreach(array('_POST', '_GET') as $__R) {
if($$__R) {
foreach($$__R as $__k => $__v) {
if(substr($__k, 0, 1) == '_') if($__R == '_POST') { unset($_POST[$__k]); } else { unset($_GET[$__k]); }
if(isset($$__k) && $$__k == $__v) unset($$__k);
}
}
}
//以上代码防止$_GET['url']报错
require_once "jssdk.php";//引入jssdk.php
$jssdk = new JSSDK("yourappid", "yoursecret");//配置appid和app_secret
$url = !empty($_GET['url']) ? $_GET['url'] : '';
$signPackage = $jssdk->GetSignPackage($url);//传入url
echo json_encode($signPackage);
?>
修改footer.htm模板文件,加入jssdk
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
$(function(){
var url = location.href.split('#').toString();//url不能写死
$.ajax({
debug : true,//开启或关闭debug,方便调试
type : "get",
url : "{DT_PATH}/api/ajax/getwxconf.inc2.php",
dataType : "json",
async : false,
data:{url:url},
success : function(data) {
wx.config({
appId: data.appId,//appId通过微信服务号后台查看
timestamp: data.timestamp,//生成签名的时间戳
nonceStr: data.nonceStr,//生成签名的随机字符串
signature: data.signature,//签名
jsApiList: [//需要调用的JS接口列表
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
]
});
},
error:function(xhr, status, error){
}
})
var meta = document.getElementsByTagName('meta');
var share_desc = '';
for(i in meta){ if(typeof meta[i].name!="undefined"&&meta[i].name.toLowerCase()=="description"){ share_desc = meta[i].content; } }//获取页面标题
var wstitle = document.title //此处填写分享标题
var wsdesc = share_desc; //此处填写分享简介(网站描述)
var wslink = url; //此处获取分享链接
var wsimg = "favicon.ico"; //此处获取分享缩略图
wx.ready(function () {
// 分享到朋友圈
wx.onMenuShareTimeline({
title: wstitle,
link: wslink,
imgUrl: wsimg,
success: function () {
alert('分享成功');
},
cancel: function () {
}
});
// 分享给朋友
wx.onMenuShareAppMessage({
title: wstitle,
desc: wsdesc,
link: wslink,
imgUrl: wsimg,
success: function () {
alert('分享成功');
},
cancel: function () {
}
});
// 分享到QQ
wx.onMenuShareQQ({
title: wstitle,
desc: wsdesc,
link: wslink,
imgUrl: wsimg,
success: function () {
alert('分享成功');
},
cancel: function () {
}
});
// 微信到腾讯微博
wx.onMenuShareWeibo({
title: wstitle,
desc: wsdesc,
link: wslink,
imgUrl: wsimg,
success: function () {
alert('分享成功');
},
cancel: function () {
}
});
// 分享到QQ空间
wx.onMenuShareQZone({
title: wstitle,
desc: wsdesc,
link: wslink,
imgUrl: wsimg,
success: function () {
alert('分享成功');
},
cancel: function () {
}
});
});
})
</script>
总结:wx.conf这里卡了很久,后来发现是url问题,一开始我是写hardcode,后来查看文档发现必须动态获取;将hardcode改回$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"
还是报错,后来发现这个$url获取的是当前php文件的url而不是网页的路径,所以必须在前端传入url参数。