微信分享网页时自定义标题、描述和图片
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信分享网页时自定义标题、描述和图片相关的知识，希望对你有一定的参考价值。
参考技术A 用微信打开一个网页，选择右上角的“发送给朋友”后，收到的消息是这样的：而为了推广效果，我们更希望能自定义标题、描述和图片，效果如下图：
实现工具： GetwxLink
下面介绍下怎样来实现这个功能
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" ></script>
<script type="text/javascript">
var imgUrl = 'http://www.gettool.cn/GetwxLink/';
var lineLink = 'http://www.gettool.cn/GetwxLink/';
var descContent = '人类天生就爱玩游戏，游戏为什么吸引人？如果借助游戏的规律，是否可以让工作学习变得更精彩？';
var shareTitle = '游戏化学习工作坊第四站-北京清华科技园';
var appid = '';
$.ajax(
type : 'POST',
url : "http://dev.mymax.cn/running/comm/weixin/open/jsSDKConfig", //这个地址并非通用且长期有效，请去微信官方查看文档，并自行配置
dataType : "json",
data:url:window.location.href,
success : function(response)
var appId = response.s.appId;
var timestamp = response.s.timeStamp;
var nonceStr = response.s.nonceStr;
var signature = response.s.signature;
wx.config(
debug: false,
appId: appId,
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
);
wx.ready(function()
wx.onMenuShareTimeline(
title: shareTitle, // 分享标题
link: lineLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: function ()
// 用户确认分享后执行的回调函数
,
cancel: function ()
// 用户取消分享后执行的回调函数
);
wx.onMenuShareAppMessage(
title: shareTitle, // 分享标题
desc: descContent, // 分享描述
link: lineLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl:'' , // 如果type是music或video，则要提供数据链接，默认为空
success: function ()
// 用户确认分享后执行的回调函数
,
cancel: function ()
// 用户取消分享后执行的回调函数
);
);
,
error:function(response)
window.parent.growl("删除失败["+response.responseText+"]!","error");
);
</script>
微信网页分享标题图片自定义设置（最新）
1 前言
刚好有微信网页分享标题图片自定义设置这个需求，然后查找文档，发现有两种方案[1]，但是第一种方案已经失效了，只能走第二种方案，然后根据实战配置好了，本文会写上配置中遇到的问题和解决方案，也作为记录使用，方便自己也方便他人。
2 步骤
2.1 准备工作
2.1.1 微信JS-SDK说明文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
2.1.2 附录6-DEMO页面和示例代码：在JS-SDK说明文档中的附录6下载示例代码，下载链接：http://demo.open.weixin.qq.com/jssdk/sample.zip
- 直接下载会出现警告（chrome浏览器下），如下图：
- 此时建议用IE或者其它浏览器下载下来，然后里面有4种常用代码的demo包可供使用
- 备注：链接中包含php、java、nodejs以及python的示例代码供第三方参考，第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制。
2.1.3 Demo页面：http://demo.open.weixin.qq.com/jssdk，建议直接用微信扫其二维码
2.1.4 你需要分享的链接的域名需要在微信上JS安全域名进行设置，然后把类似MP_verify_HD1YQU88nBxyhisnY.txt文件放到项目的根目录下即可
2.2 以php为例
2.2.1 在sample.php文件中的代码嵌入到你需要分享的网页（暂定成为share.html）里面去，本文是直接把share.html合并到sample.php中去，然后直接修改sample.php为share.html（好处是不需要修改里面的引入类的路径）
2.2.2 只需要在sample.php中把AppID和Key配置一下即可$jssdk = new JSSDK("your appid", "your key");
2.2.3 配置自定义信息
<?php
require_once "jssdk.php";
$jssdk = new JSSDK("your appid", "your key");
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
/*
* 注意：
* 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
* 邮箱地址：weixin-open@qq.com
* 邮件主题：【微信JS-SDK反馈】具体问题
* 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
*/
wx.config({
debug: true,
appId: \'<?php echo $signPackage["appId"];?>\',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: \'<?php echo $signPackage["nonceStr"];?>\',
signature: \'<?php echo $signPackage["signature"];?>\',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
\'checkJsApi\',
\'onMenuShareTimeline\',
\'onMenuShareAppMessage\'
]
});
var imgUrl = \'http://app.example.com/images/logo.jpg\';
var lineLink = \'http://app.example.com/html/share.html\';
var descContent = \'我是副标题，我是小小地描述，分享好友才能看到我\';
var shareTitle = \'我是正标题，分享朋友圈和好友都能看到我\';
wx.ready(function () {
// 在这里调用 API
wx.onMenuShareTimeline({
title: shareTitle, // 分享标题
link: lineLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareAppMessage({
title: shareTitle, // 分享标题
desc: descContent, // 分享描述
link: lineLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
type: \'\', // 分享类型,music、video或link，不填默认为link
dataUrl:\'\' , // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
</script>
</html>
2.2.4 用浏览器打开要分享的链接，此时会出现报错，Notice：curl_setopt():CURLOPT_SSL_VERIFYHOST no longer accepts the value1,value2 will be used instead in xxx_file_postion on line yyy;
解决方案[3]：
第一种是：
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
第二种是：
按照文档提示，直接在http://curl.haxx.se/ca/cacert.pem下载证书，放在和jssdk.js同个目录下
private function httpGet($url) {
$curl = curl_init();
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_TIMEOUT, 500);
// 为保证第三方服务器与微信服务器之间数据传输的安全性，所有微信接口采用https方式调用，必须使用下面2行代码打开ssl安全校验。
// 如果在部署过程中代码在此处验证失败，请到 http://curl.haxx.se/ca/cacert.pem 下载新的证书判别文件。
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);
curl_setopt($curl, CURLOPT_URL, $url);
$res = curl_exec($curl);
curl_close($curl);
return $res;
}
2.2.5 然后就可以直接分享到朋友圈或者好友，就可以看到效果了
3 遇到的问题及解决方法
采用2.2.4的第二种加入证书方式，由于access_token和公众号开发没有统一（这个分享页面是一个独立的项目），导致了报错Notice：curl_setopt():CURLOPT_SSL_VERIFYHOST no longer accepts the value1,value2 will be used instead in xxx_file_postion on line yyy;此时使用2.2.4的第一种取消SSL验证就可以通过了，同时也修改了access_token统一管理，让微信公众号后台和其能获取到一样的access_token。
4 参考
以上是关于微信分享网页时自定义标题、描述和图片的主要内容，如果未能解决你的问题，请参考以下文章