尤明明Blog

网站建设 | 前端切图,技术不仅是一种专业,更是一种责任!

您的当前位置: 首页 » CMS学习 » 极致cms »

网页在微信分享带图片和自定义标题、描述

2025-03-06   Umming   极致cms    评论(0)    浏览(39)


需要已经完成认证的订阅号和服务号,并且到接口中心查询是否取得分享接口的权限、别忘了配置ip白名单和业务域名;

php程序的的签名

<?php
//header("Access-Control-Allow-Origin:*");
// 配置你的AppID和AppSecret
$appId = '你的appid';
$appSecret = '你的appSecret';

// 获取access_token
$accessTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appId}&secret={$appSecret}";
$accessTokenData = json_decode(file_get_contents($accessTokenUrl), true);
$accessToken = $accessTokenData['access_token'];

// 获取jsapi_ticket
$jsapiTicketUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$accessToken}&type=jsapi";
$jsapiTicketData = json_decode(file_get_contents($jsapiTicketUrl), true);
$jsapiTicket = $jsapiTicketData['ticket'];

// 生成随机字符串
$nonceStr = createNonceStr();
// 生成时间戳
$timestamp = time();
// 当前页面的URL,注意你的是http还是https协议
$url = 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

// 生成签名
$string = "jsapi_ticket={$jsapiTicket}&noncestr={$nonceStr}&timestamp={$timestamp}&url={$url}";
$signature = sha1($string);

// 生成随机字符串的函数
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;
}
?>


前端页面

引入微信sdkjs

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js
(备用链接)(支持https)http://res2.wx.qq.com/open/js/jweixin-1.6.0.js 。
配置自定义内容


 <script>
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '<?php echo $appId; ?>', // 必填,公众号的唯一标识
        timestamp: <?php echo $timestamp; ?>, // 必填,生成签名的时间戳
        nonceStr: '<?php echo $nonceStr; ?>', // 必填,生成签名的随机串
        signature: '<?php echo $signature; ?>', // 必填,签名
        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填,需要使用的JS接口列表
    });

    wx.ready(function () {
        // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
        wx.updateAppMessageShareData({ 
                title: '',
 desc: '',
 link: '',
 imgUrl: '',
            success: function () {
           
            }
        });

        // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
        wx.updateTimelineShareData({ 
             title: '{$v["title"]}',
 desc: '{$v["description"]}',
 link: '{$v["url"]}',
 imgUrl: '{fun get_domain()}/favicon.png',
                success: function () {
               
               }
        });
    });
    //debug开启时查看调用报错信息
    wx.error(function(res){
   console.log(res)
 });
 //debug开启时检查接口权查
    wx.checkJsApi({
   jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
   success: function(res) {
    console.log(res)
   }
 });
</script>

说明:查资料,由于规则修改h5页面从公众号自定义菜单后入口分享才可以显示自定义链接形式,如果微信直接打开文字类型链接,分享以后仍然只显示文字链接,引入sdk并配置成功后,第三方app分享的链接,打开后也可以显示自定义样式



标签: 建站教程

本文链接:https://www.umming.com/jizhicms/377.html

声明:本站信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!


//