网页在微信分享带图片和自定义标题、描述
2025-03-06 Umming 极致cms 评论(0) 浏览(1091)
需要已经完成认证的订阅号和服务号,并且到接口中心查询是否取得分享接口的权限、别忘了配置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上传图片转存一个webp字段
下一篇: 极致cms文章详情页图片增加懒加载功能
本文链接:https://www.umming.com/jizhicms/377.html
声明:本站信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
也许你还会对下面的内容感兴趣: