H5网页在微信内分享时自定义分享的标题、描述和缩略图(附后端代码)

来源:IT星空
访问量:33
发布日期:2024-04-30

微信内分享H5网页时默认发出去是链接,如果要想分享时带有标题、描述和图片,需要进行如下设置:

首先要有个公众号,公众号里获取到appid和appsecret,然后将后端服务器的IP设置到IP白名单里,将需要分享的H5网页的域名设置到公众号的JS安全域名里。以下是代码部分:

前端:

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
function hady1(){          
    $.ajax({
      type:"POST",
      url:'/wxshare.php',		//请求的后端地址
      data: {url: window.location.href},
      success:function(result){
//            console.log(result);
        // 检测是否拥有权限
//             wx.checkJsApi({
//              jsApiList: ['updateAppMessageShareData'], // 需要检测的 JS 接口列表,所有 JS 接口列表见附录2,
//              success: function(res) {
//                  alert(JSON.stringify(res));
//              }
//             });
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: result.data.appid, // 必填,公众号的唯一标识
            timestamp: result.data.time, // 必填,生成签名的时间戳
            nonceStr: result.data.nonceStr, // 必填,生成签名的随机串
            signature: result.data.signature,// 必填,签名,见附录1
            jsApiList: ['updateAppMessageShareData','updateTimelineShareData'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
        });        
        let title = '换成您要分享的标题';
        let description = '换成您要分享的描述';
        let link = location.href;
        let cover = '换成您要分享的图片路径';

        wx.ready(function(){
        	//发送给朋友
            wx.updateAppMessageShareData({
                title: title, // 分享标题
                desc: description, // 分享描述
                link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                imgUrl: cover, // 分享图标
                 success: function () {
//                      alert('分享成功');
                 },
                 cancel: function () {
                 // alert('取消分享了');
                 }
            });
            //分享到朋友圈
            wx.updateTimelineShareData({ 
                title: title, // 分享标题
                link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: cover, // 分享图标
                success: function () {
                  // 设置成功
                }
            });               
        });
      }
    });
}
$(document).ready(function(){
    hady1();
});
</script>

后端代码share.php:

//        header("Access-Control-Allow-Origin: *"); //解决跨域
//        header('Access-Control-Allow-Methods:POST'); // 响应类型
//        header('Access-Control-Allow-Headers:*'); // 响应头设置
        header('Content-type: application/json; charset=utf-8');
        $data = array();
        $data['time'] = time();
        $data['appid'] = '替换成您的公众号appid'; //appid
        $data['secret'] = '替换成您的公众号secret'; //secret
        $res = file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$data['appid']."&secret=".$data['secret']); //获得access_token
        $ress = json_decode($res,True);
        $access_token = $ress['access_token'];// 取出 至于存储代码就不列举了
        $js = file_get_contents("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access_token."&type=jsapi");
        $jss = json_decode($js,True);
        $jsapi_ticket = $jss['ticket'];// 取出JS凭证, 至于存储代码就不列举了
         
        //开始签名算法了
        $sign = array();
        $sign['noncestr'] = 'W99WZY08z0wzcjjkl'; //随意字符串 一会要传到JS里去.要求一致
        $sign['jsapi_ticket'] = $jsapi_ticket;
        $sign['timestamp'] = $data['time'];
        $sign['url'] = $_POST['url'];//获取URL
        ksort($sign);
        $signature = '';
        foreach($sign as $k => $v){
            $signature .= $k.'='.$v.'&';
        }
        $signature = substr($signature, 0, strlen($signature)-1);
        $data['signature'] = sha1($signature);// 必填,签名,见附录1
         
        $data['nonceStr'] = $sign['noncestr'];

        $response = array('code' => 0, 'message' => '请求成功', 'data' => $data);
        echo json_encode($response);