网页在微信分享带图片和自定义标题、描述
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}×tamp={$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分享的链接,打开后也可以显示自定义样式
标签: 建站教程
下一篇: 极致cms文章详情页图片增加懒加载功能
本文链接:https://www.umming.com/jizhicms/377.html
声明:本站信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
也许你还会对下面的内容感兴趣: