微信分享带图片，描述（php版）

最近在为网站添加微信分享带图片，描述的功能，这个功能之前了解过，但并没有彻底实现过，这个功能需要认证的公众号支持。
第一步：在已经认证的公众号配置安全域名（网上很多教程）
第二步：在微信公众平台文档获取示例源码，阅读文档，如果时间紧迫可直接阅读源码
第三步：阅读源码并按需求修改源码
源码文档结构如下：
在这里插入图片描述

由于网站采用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&timestamp=$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参数。
在这里插入图片描述

微信分享带图片，描述（php版）

猜你喜欢