让网页在微信中显示缩略图和简介源码分享

子牙 2017 年 5 月 11 日23:18:06
评论
9,472 views2

很多人在不太熟悉php程序采用模板建站的都会为如何实现在微信中显示图文的方式而头疼,近期姜成因为一个项目就顺手用微信官方的jssdk做了一个适合静态网页的分享源码。首先大家要创建两个文件weixin.php 和jssdk.php
源码如下:
以下是PHP文件 weixin.php 内容:

<?php  
error_reporting(E_ALL^E_NOTICE^E_WARNING);  
require_once "jssdk.php";/* 这里的文件路径视`php`文件夹所在路径而定。不一定都要一样,个人建议扔到一个所有html文件夹都可以引用的目录*/  
//$jssdk = new JSSDK("你的APPID", "你的APPSECRET");  
$jssdk = new JSSDK("wxb352395f6af83b49", "e9612c4f552758c3cb7100657b7c5d64");  
$signPackage = $jssdk->GetSignPackage();  
?>  
    wx.config({  
        debug: false,// true开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。移动端会通过弹窗来提示相关信息。如果分享信息配置不正确的话,可以开了看对应报错信息  
        appId: '<?php echo $signPackage["appId"];?>',  
        timestamp: '<?php echo $signPackage["timestamp"];?>',  
        nonceStr: '<?php echo $signPackage["nonceStr"];?>',  
        signature: '<?php echo $signPackage["signature"];?>',  
        jsApiList: [//需要使用的JS接口列表,分享默认这几个,如果有其他的功能比如图片上传之类的,需要添加对应api进来  
            'checkJsApi',  
            'onMenuShareTimeline',//  
            'onMenuShareAppMessage',  
            'onMenuShareQQ',  
            'onMenuShareWeibo'  
        ]  
    });

以下是PHP文件 jssdk.php 内容

<?php  
class JSSDK {  
  private $appId;  
  private $appSecret;  
  public function __construct($appId, $appSecret) {  
    $this->appId = $appId;  
    $this->appSecret = $appSecret;  
  }  
  public function getSignPackage() {  
    $jsapiTicket = $this->getJsApiTicket();  
//    $url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";  
//$url = "http://www.izsjia.com/?from=singlemessage&isappinstalled=0";  
//echo "A:".$url."<br/>";  
//$url = $_GET['url'];  
//echo "B:".$url."<br/>";  
$url = $_SERVER['HTTP_REFERER'] ;  
//echo "C:".$url."<br/>";  
    $timestamp = time();  
    $nonceStr = $this->createNonceStr();  
    // 这里参数的顺序要按照 key 值 ASCII 码升序排序  
    $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";  
//$stringaaa = "jsapi_ticket=$jsapiTicket"."<br/>"."noncestr=$nonceStr"."<br/>"."timestamp=$timestamp"."<br/>"."url=$url";  
//echo $stringaaa;  
    $signature = sha1($string);  
    $signPackage = array(  
      "appId"     => $this->appId,  
      "nonceStr"  => $nonceStr,  
      "timestamp" => $timestamp,  
      "url"       => $url,  
      "signature" => $signature,  
      "rawString" => $string  
    );  
    return $signPackage;   
  }  
  private function createNonceStr($length = 16) {  
    $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";  
    $str = "";  
    for ($i = 0; $i < $length; $i++) {  
      $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);  
    }  
    return $str;  
  }  
  private function getJsApiTicket() {  
    // jsapi_ticket 应该全局存储与更新,以下代码以写入到文件中做示例  
    $data = json_decode(file_get_contents("jsapi_ticket.json"));  
    if ($data->expire_time < time()) {  
      $accessToken = $this->getAccessToken();  
      $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";  
      $ch = curl_init();  
curl_setopt($ch, CURLOPT_URL, $url);  
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);   
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);   
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);  
$output = curl_exec($ch);  
curl_close($ch);  
$jsoninfo = json_decode($output, true);  
$ticket = $jsoninfo["ticket"];  
//    $res = json_decode($this->httpGet($url));  
//      $ticket = $res->ticket;  
      if ($ticket) {  
        $data->expire_time = time() + 7000;  
        $data->jsapi_ticket = $ticket;  
        $fp = fopen("jsapi_ticket.json", "w");  
        fwrite($fp, json_encode($data));  
        fclose($fp);  
      }  
    } else {  
      $ticket = $data->jsapi_ticket;  
    }  
    return $ticket;  
  }  
  private function getAccessToken() {  
    // access_token 应该全局存储与更新,以下代码以写入到文件中做示例  
    $data = json_decode(file_get_contents("access_token.json"));  
    if ($data->expire_time < time()) {  
      $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";  
$ch = curl_init();  
curl_setopt($ch, CURLOPT_URL, $url);  
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);   
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);   
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);  
$output = curl_exec($ch);  
curl_close($ch);  
$jsoninfo = json_decode($output, true);  
$access_token = $jsoninfo["access_token"];  
      
//<!--      $res = json_decode($this->httpGet($url));  
//      $access_token = $res->access_token;-->  
      if ($access_token) {  
        $data->expire_time = time() + 7000;  
        $data->access_token = $access_token;  
        $fp = fopen("access_token.json", "w");  
        fwrite($fp, json_encode($data));  
        fclose($fp);  
      }  
    } else {  
      $access_token = $data->access_token;  
    }  
    return $access_token;  
  }  
  private function httpGet($url) {  
    $curl = curl_init();  
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);  
    curl_setopt($curl, CURLOPT_TIMEOUT, 500);  
    curl_setopt($curl, CURLOPT_URL, $url);  
    $res = curl_exec($curl);  
    curl_close($curl);  
    return $res;  
  }  
}

这两个文件放到同一个目录比如:根目录/include/weixin然后只需要在网页使用下方代码调用即可: 

<!--微信分享-->  
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  
<script type="text/javascript" src="/include/weixin/weixin.php"></script>  
<script>  
wx.ready(function () {  
        var shareData = {  
        imgUrl: "http://www.izsjia.com/assets/i/logo.png",//分享图,默认当相对路径处理,所以使用绝对路径的的话,“http://”协议前缀必须在。  
        //imgUrl: "{dede:global.static/}{dede:field.typeimg /}",//分享图,默认当相对路径处理,所以使用绝对路径的的话,“http://”协议前缀必须在。  
        desc : '{dede:field.description function='html2text(@me)'/}',//摘要,如果分享到朋友圈的话,不显示摘要。  
        title : '{dede:field.seotitle /}',//分享卡片标题  
        link: window.location.href,//分享出去后的链接,这里可以将链接设置为另一个页面。  
        type: '' ,// 分享类型,music、video或link,不填默认为link  
        dataUrl: '' ,//如果type是music或video,则要提供数据链接,默认为空  
        success:function(){//分享成功后的回调函数  
        },  
        cancel: function () {   
            // 用户取消分享后执行的回调函数  
        }  
        };  
      
        wx.onMenuShareAppMessage(shareData);  
        wx.onMenuShareTimeline(shareData);  
        wx.onMenuShareQQ(shareData);  
        wx.onMenuShareWeibo(shareData);  
        wx.onMenuShareQZone(shareData);  
    });  
    wx.error(function (res) {  
      alert(res.errMsg);  
    });  
</script>  
<!--微信分享-->
    weinxin
    姜成营销
    这是我的微信扫一扫
    子牙
    • 本文由 发表于 2017 年 5 月 11 日23:18:06
    • 转载请务必保留本文链接:https://www.jiang-cheng.com/jianzhanchengxu/833.html
    匿名

    发表评论

    匿名网友 填写信息

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: