1. 程式人生 > >微信分享帶圖片,描述(php版)

微信分享帶圖片,描述(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引數。
在這裡插入圖片描述