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

微信里分享一个链接，如下如：

要求带标题，描述，缩略图，如下图：

首先。需要了解一下微信JS-SDK说明文档，大概有个了解。看完我们只需知道这四点：

1. 根据appId和appsecret获取access_token;

2. 使用access_token获取jsapi_ticket;

3. 使用时间戳，随机串，jsapi_ticket和要访问的url按照签名算法拼接字符串；

4. 对第三步的字符串进行SHA1加密，得到签名；

其中。官方文档中三个东西我们可以用的：

1，微信公众平台接口调试工具：

用来检测你的token是否正确获取。填入你的微信ID和秘钥。成功返回200 OK,如图：

2，微信 JS 接口签名校验工具，如图：

3，HTML要引入的官方JS

http://res.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）或者 http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）

废话少说,开撸：

1，登录公众平台，“公众号设置”的“功能设置”里填写“JS接口安全域名”，“网页授权域名”，如下图：

2，登录公众平台，开发，基本配置。找到微信ID（AppID）和秘钥（AppSecret）,IP白名单填写为你域名解析的IP如下图：

3,打开后台项目文件，注释写的很清楚，不要填错。直接上代码：

    public function index(){ // 1.设置appId和appsecret$appid = '你的微信AppID';  //此处填写绑定的微信公众号的appid$appsecret = '你的微信AppSecret'; //此处填写绑定的微信公众号的密钥id// 2.获取access_token$result = file_get_contents('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$appsecret);$json = json_decode($result,true);  $access_token = $json['access_token'];// 3.获取ticket;$urls = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$access_token";$res = json_decode ( file_get_contents ( $urls ) );$ticket = $res->ticket;  //获取url$url='https://'.$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];//随机字符串$nonceStr=$this->nonceStr(16);//时间戳$timestamp=time();$ws=$this->getWxConfig($appid,$ticket,$timestamp,$nonceStr,$url);$a=($ws['appId']);$b=($ws['nonceStr']);$c=($ws['signature']);$d=($ws['timestamp']);$this->assign('appId',$a);$this->assign('nonceStr',$b);$this->assign('signature',$c);$this->assign('timestamp',$d);return $this->fetch(':index');}function getWxConfig($appid,$ticket,$timestamp,$nonceStr,$url) {// 4.使用时间戳，随机串，jsapi_ticket,url按照签名算法拼接字符串；$string = "jsapi_ticket=$ticket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";// 5对第三步的字符串进行SHA1加密，得到签名；$signature = sha1 ( $string );$WxConfig["appId"] = $appid;$WxConfig["nonceStr"] = $nonceStr;$WxConfig["timestamp"] = $timestamp;$WxConfig["url"] = $url;$WxConfig["signature"] = $signature;$WxConfig["rawString"] = $string;return$WxConfig;}function nonceStr($length){$str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJK1NGJBQRSTUVWXYZ';//随即串，62个字符$strlen = 62;while($length > $strlen){$str .= $str;$strlen += 62;}$str = str_shuffle($str);return substr($str,0,$length);}

4,前台HTML文件。直接上代码：

<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--引入官方js--><script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script><script>wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '{$appId}', // 必填，公众号的唯一标识timestamp:'{$timestamp}' , // 必填，生成签名的时间戳nonceStr: '{$nonceStr}', // 必填，生成签名的随机串signature: '{$signature}',// 必填，签名，见附录1jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2})</script><script>wx.ready(function(){//分享朋友圈wx.onMenuShareTimeline({title: '倍享高尔夫夏令营火热招募中，少年未来可期！', // 分享标题link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: "https://你的域名/themes/mobile/public/assets/images/image.png", // 分享图标success: function () {// alert("成功")}});//分享好友wx.onMenuShareAppMessage({title: '倍享高尔夫夏令营火热招募中，少年未来可期！', // 分享标题desc: '寓教于乐，内外兼修的多维课程丰富而精彩，这个暑假，当少年遇上高尔夫，让自信与优秀成为一种习惯，倍享成长快乐！', // 分享描述link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: "https://你的域名/themes/mobile/public/assets/images/image.png", // 分享图标type: '', // 分享类型,music、video或link，不填默认为linkdataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空success: function () {// alert("成功")}});});</script><title>倍享高尔夫夏令营</title>
</head>
<body>
</body>
</html>

最终效果如下图所示：

本文后台基于Thinkphpcmf框架开发。

注意事项：

域名为HTTP，URL也为HTTP。如果是HTTPS。URL也为HTTPS

IP白名单必填。

关闭错误提示只需步骤4中，debug: false即可。

如果还有问题，请留言，谢谢。

微信分享网页时自定义标题描述和图片相关推荐

微信分享网页时自定义标题、描述和图片
用微信打开一个网页,选择右上角的"发送给朋友"后,收到的消息是这样的: 而为了推广效果,我们更希望能自定义标题.描述和图片,效果如下图: 下面介绍下怎样来实现这个功能 <sc ...
html分享标题描述图片尺寸,微信分享网页时自定义标题、描述和图片
用微信打开一个网页,选择右上角的"发送给朋友"后,收到的消息是这样的: 而为了推广效果,我们更希望能自定义标题.描述和图片,效果如下图: 实现工具:GetwxLink 联系QQ:6 ...
微信分享网页链接自定义标题，图片,文字描述
我先描述一下该h5的业务场景: 想实现微信中的h5页面分享给好友或者是朋友圈时有自定义的标题,描述,分享图片:而不是...如下图前提条件: 1.请确认公众号已经认证,只有认证的公众号才具有分享相关接 ...
微信分享网页链接自定义图片和文字描述
今天开发需要微信分享网页链接自定义图片和文字描述,于是网上各种查找资料和各种看手册,遇到了好多坑,不过啃了半天以后终于把问题解决了,以防以后忘记,今天记录一下; 首先,由于微信已经发布了想要分享链接必 ...
typecho图标_Typecho微信自定义分享插件WeChatShare 自定义标题描述小图标
前言张小龙带领微信走进了大众的生活,在十亿用户的生活里扎根.于是我们不管是阅读.聊天.看视频,基本上都离不开微信.好东西分享给用户,第一时间想到的肯定是微信. 很久以前,一个网页分享到微信聊天,系统 ...
h5 修改title 微信_微信分享H5自定义标题描述和图片
前言哎呀,为啥人家分享的H5页面这么绚丽,有头有尾有妹子,唯独自己的又老有丑又难啃,自己都看不下去,千万不要给领导看见.然而,最终还是领导发话了这个必须得改. 永远不要指望微信给的案例能让你迅速解决 ...
html分享标题描述图片尺寸,微信分享H5自定义标题描述和图片
前言哎呀,为啥人家分享的H5页面这么绚丽,有头有尾有妹子,唯独自己的又老有丑又难啃,自己都看不下去,千万不要给领导看见.然而,最终还是领导发话了这个必须得改. 永远不要指望微信给的案例能让你迅速解决 ...
微信分享，实现自定义标题、描述、图标
使用JSSDK+PHP实现网页微信自定义分享步骤一:绑定域名.设置白名单登录微信公众平台,进入"公众号设置"的"功能设置"里填写"JS接口安全域名 ...
微信分享链接怎么自定义标题、描述和缩略图？
什么是微信图文链接? 图文链接就是把一条普通的分享链接经过技术编辑,生成一张卡片,卡片表面包含标题,简介,小图片,用户点击卡片机会跳转相应的网页. 没生成图文链接之前,不仅把网址显示出来,缩略图也是不 ...
微信分享朋友圈自定义标题链接
<?php require_once "jssdk.php"; $jssdk = new JSSDK("wxc5a65470f2a10f7", " ...

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

微信分享网页时自定义标题描述和图片相关推荐

最新文章

热门文章