H5页面微信内分享获取标题、摘要、图片等信息-基于ThinkPHP开发

普通的H5页面微信分享（转发朋友圈）时，显示的是：标题、图片为空、及链接，可读性不强，如果希望能够像微信公众号的文章一样，分享出标题、图片、摘要信息，那么需要如下几个步骤！
本文基于ThinkPHP开发！

一、准备工作
1.首先在公众号管理后台“公众号设置”的“功能设置”里填写JS接口安全域名，域名需要通过ICP备案，没有备案域名可以用SAE、BAE等平台。
2.自定义分享功能需要通过微信认证才能使用，没有认证的可以跟关系好的朋友借用权限，在他的JS接口安全域名设置这里填上你的域名和共享同一个开发者ID。
官方文档参考：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

二、开发
1.后台获取签名数据，这里我们通过Service来获取。

/**
 * 微信分享、登录等相关的服务类
 */
class WeChatService extends BaseService{

    /*
      获取微信公众号的ticket
    */
    public function getTicket()
    {
        $wxSign = new WxsignController();
        $appId = $wxSign->appid;
        $appSecret = $wxSign->secret;
        $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appId."&secret=".$appSecret;
        $ch = curl_init();//初始化curl
        curl_setopt($ch, CURLOPT_URL, $url); //要访问的地址
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);//跳过证书验证
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); // 从证书中检查SSL加密算法是否存在
        $data = json_decode(curl_exec($ch));
        $tocken = $data->access_token;
        //var_dump($data);
        if (curl_errno($ch)) {
            var_dump(curl_error($ch)); //若错误打印错误信息
        }
        curl_close($ch);//关闭curl

        $ticket = "";
        if (hasValue($tocken)) {
            $ch = curl_init();//初始化curl
            $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" . $tocken . "&type=jsapi";
            curl_setopt($ch, CURLOPT_URL, $url); //要访问的地址
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);//跳过证书验证
            curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); // 从证书中检查SSL加密算法是否存在
            $data_ticket = json_decode(curl_exec($ch));
            //var_dump($data_ticket);
            $ticket = $data_ticket->ticket;
            curl_close($ch);//关闭curl
        }

        //echo $ticket;
        return $ticket;

    }

    //微信用方法
    public 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;
    }

    /**
     * 获取签名数据
     * @return array
     */
    public function getSignPackage(){
        $nonceStr = $this->createNonceStr();
        $timestamp = time();
        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
        $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
        $ticket = $this->getTicket();
        $string = "jsapi_ticket=" . $ticket . "&noncestr=" . $nonceStr . "&timestamp=" . $timestamp . "&url=" . $url;
        $signature = sha1($string);
        $wxSign = new WxsignController();
        $appId = $wxSign->appid;
        $signPackage = array(
            "appId" => $appId,
            "nonceStr" => $nonceStr,
            "timestamp" => $timestamp,
            "url" => $url,
            "signature" => $signature,
            "rawString" => $string
        );

        return $signPackage;
    }
}

2、前端获取签名数据，设置分享对应的标题、图片、摘要信息

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script type="text/javascript">
    function filterHTMLTag(msg) {
        msg = msg.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
        msg = msg.replace(/[|]*\n/, '') //去除行尾空格
        msg = msg.replace(/&npsp;/ig, ''); //去掉npsp
        return msg;
    }

    wx.config({
        debug: false,
        appId: '<?php echo $signPackage["appId"];?>',
        timestamp: <?php echo $signPackage["timestamp"];?>,
        nonceStr: '<?php echo $signPackage["nonceStr"];?>',
        signature: '<?php echo $signPackage["signature"];?>',
        jsApiList: [
        'onMenuShareAppMessage','onMenuShareTimeline'
    ]
    });

    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
        var desc = "";//这里是摘要，可以提取description标签的值
        var title = $("title").html();//标题
        var link = location.href;
        var imgUrl = $("body").find("xxx").prop("src");//图片的地址

        //分享微信和QQ好友
        wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: imgUrl, // 分享图标
            success: function () {
                // 设置成功
            }
        })

        //分享朋友圈和QQ说说
        wx.onMenuShareTimeline({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: imgUrl, // 分享图标
            success: function () {
                // 设置成功

            }
        })
    });
</script>

注意：如果将js写在最后，那么有可能用户还没有加载到js就去分享了，这种情况下，是无法获取到分享文字摘要、图片相关的信息的。