微信分享网页 显示图标标题描述解决方法

微信生态圈里的网页比如小程序和公众号的文章分享出去都是显示的卡片式，有图标，标题，描述信息的卡片。而一般的网页分享就只是URL地址，怎么实现一个网站的页面分享出去是卡片式的信息呢。

想要实现这样的功能有几个必要条件，如果没有的话那就没办法，只能想些其他办法，实现曲线救国。

前期准备部分

有了上面两个条件还需要做些前期准备

1.添加白名单IP

登入公众号管理平台，在基本配置 -> 白名单，添加网站的IP地址 保存

2.记录AppID和AppSecret

同样是在 基本配置 里找到 开发者ID(AppID)和开发者密码(AppSecret)，可以看上图所示，这两个需要后面用到记录就行

3.添加安全域名

在公众号管理后台 公众号设置->功能设置，点开“JS接口安全域名”和“业务域名”，将你的网页域名加进去，保存即可，如下图，添加的时候会有个验证，更百度站长平台一样下载个文件放在网站根目录就行。

代码部分：

静态页面上的代码

将需要在微信端分享的页面（HTML页面），增加以下代码，其实就是一段JavaScript代码，代码主要功能是通过ajax获取后台PHP生成的一些信息，因为该代码基于jquery，所以还需要在之前加载一个jquery。

<!-- 微信分享 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
  var url = location.href;
  $.ajax({
    type: "get",
    //这里是放在根目录如新建文件夹则url："http://这里改为你自己的网址.com/文件夹名/jssdk.php?url="+url
    url: "http://youromain/jssdk.php?url=" + url,
    dataType: "jsonp",
    jsonp: "callback",
    jsonpCallback: "success_jsonpCallback",
    success: function (data) {
      console.log(data);
      wx.config({
        debug: true,
        appId: data.appId,
        timestamp: data.timestamp,
        nonceStr: data.nonceStr,
        signature: data.signature,
        jsApiList: [
          'updateAppMessageShareData',
          'updateTimelineShareData'
        ]
      });
    },
    error: function (data) {
      alert("连接失败！");
    }
  });

  wx.ready(function (res) {
    var shareData = {
      title: '这是分享标题',
      desc: '这是摘要',
      link: url,
      imgUrl: '',//图片地址
      success: function () {
      },
      cancel: function () {
      }
    };
    wx.updateAppMessageShareData(shareData);
    wx.updateTimelineShareData(shareData);
  });
  wx.error(function (res) {
    alert(res.errMsg);//错误提示
  });
</script>

后台PHP代码

这个需要新建一个php文件，可以放在根目录，也可以放在任意位置，不过要跟上一段代码中的ajax中url的参数要对应到（本例中是在根目录）。

<?php
$url = $_GET['url'];
class JSSDK {
    private $appId;
    private $appSecret;
    private $url;
    public function __construct($appId, $appSecret,$url) {
        $this->appId = $appId;
        $this->appSecret = $appSecret;
        $this->url = $url;
    }
    public function getSignPackage() {
        $jsapiTicket = $this->getJsApiTicket();
        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
        // $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
        $url =$this->url;
        $timestamp = time();
        $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,
            "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 获取 ticket
            // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
            $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
            $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获取access_token
            // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
            $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
            $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_SSL_VERIFYPEER, false);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
        curl_setopt($curl, CURLOPT_URL, $url);
        $res = curl_exec($curl);
        curl_close($curl);
        return $res;
    }
}
 
$jssdk = new JSSDK("******", "*******",$url);
$signPackage = $jssdk->GetSignPackage();
$tmp=json_encode(array ('appId'=>$signPackage["appId"],'timestamp'=>$signPackage["timestamp"],'nonceStr'=>$signPackage["nonceStr"],'signature'=>$signPackage["signature"],'url'=>$signPackage["url"]));
$callback = $_GET['callback'];
echo $callback.'('.$tmp.')';
exit;

在实际使用的时候只需要修改为自己的AppId和AppSecret，即下面的位置，分别填写自己的AppId和AppSecret。

$jssdk = new JSSDK("******", "*******",$url);

只需要前期准备没有错误，安全域名和IP白名单填写正确，替换AppId和AppSecret也正确，代码就可以跑起来，在使用中还是有些小问题，给记录下。

1.第一个是关于版本问题

就是以1.4.0版本的分界分享接口的区别，1.4.0以前用的onMenuShareAppMessage等这类，1.4.0后用的是updateAppMessageShareData这类，具体可以看官网的说明

由于版本问题还会出现使用updateAppMessageShareData这类借口分享到企业微信上自定义标题图片描述显示失效，而使用onMenuShareAppMessage这类可以正常分享到企业微信，标题图片页正常显示。所以如果有需要分享到企业微信使用老的接口：

jsApiList: [
	'onMenuShareTimeline',
	'onMenuShareAppMessage',
	'onMenuShareQQ',
	'onMenuShareWeibo',
	'onMenuShareQZone'
]

其他情况使用新接口吧，毕竟人家新呀：

jsApiList: [
	'updateAppMessageShareData',
	'updateTimelineShareData',
]

2.第二个是怎么分享URL问题

如果直接发URL，打开页面后使用微信的分享功能，分享出去还是URL，需要将URL使用微信收藏后打开再分享（验证过）、微信开发工具生成的二维码扫出来后分享（验证过），或者加入到公众号菜单里（未验证）；这个问题需要格外注意，当初我就是页面调试都显示config:ok，但是直接打开URL的方式还是不行，一度认为是配置错误。