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

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

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

首先。需要了解一下微信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./open/js/jweixin-1.4.0.js（支持https）或者http://res2./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./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./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"><script src="https://res2./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即可。

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