微信中分享页面已经是很流行的一种方式，那么如何可以让自己做的h5页面能设置分享标题、描叙和图片呢？
问题
第三方网站在微信中分享的链接想要左边有简介概述，右边有缩略图，没有缩略图不能引起客户足够的重视。尤其不利于分享朋友圈和用户转发.一个看上去不正规的链接终究难于进行传播和宣传推广。
案例如下图,请查看描述和缩略图
上图显示无法缩略图，看上去很不正规的样子。
解决办法
1、必须有认证的公众号
首先,必须要有认证过的微信公众号，因为在接口权限中，没有认证过的公众号是没有权限进行分享有缩略图的，在此可以看下自己微信公众平台的接口权限中自己是否有以下权限。如果有，恭喜，就可以进行下一步的操作了
具体认证过程请到微信开放平台去查询。
2、设置域名到JS接口安全域名
如果有权限的话,进行下一步，配置微信公众号的基本配置，进入微信公众号配置里面的功能设置,然后设置自己的域名到JS接口安全域名。
注意设置的时候需要下载一个文本放在自己FTP的根目录上进行验证权限。
3、设置IP白名单
设置好了之后,进入设置----安全中心-----IP白名单,填写自己的网站ip(一定要是备案过的)
上面设置好了基本上就需要在服务器上进行开发配置了,最重要的事需要有自己的公众号appid和AppSecret,有了这个才能进行下一步的开发。
4、查看微信JS-SDK说明文档
有了这个之后,访问腾讯开发者中心查看各个开发环境的具体开发步骤，一般都有开发样例源码的，可以进行查看
进入公众号开发者文档主页
进入主页在微信网页开发----微信JS-SDK说明文档栏目下可查看教程。
5、代码来了
下载需要的文档 链接如下：
http://demo.open.weixin.qq.com/jssdk/sample.zip
解压后选择你的开发语言版本。
1，文件头部引入以下php 代码
<?php
require_once "jssdk.php";
$jssdk = new JSSDK("您的公众号appid", "您的公众号appsecret");*//JSSDK中的参数是appid和appsecret。*
$signPackage = $jssdk->GetSignPackage();*//获取配置参数。*
?>
备注：
a>项目头部引入的jssdk.php
b>，必须要有一个认证过的微信公众号，将认证过的微信公众号appid和appsecret填入，如何获得微信公众号的appid和appsecret，请自行百度。
2，文件结尾引入以下代码：
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<!--必须要引入此文件-->
<script>
*//wx表示一个js-sdk构建的一个对象。config（）是它的一个方法，这个接口用来验证配置。*
wx.config({
debug: false,*//true表示每调用一个接口信息都会在页面alert一段字符串。方便测试过程中国是否能正确调用接口。*
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
*//上面的4个参数，如果你像深入了解其来源就去查看jssdk.php代码。测试过程不需要对上面的代码做任何操作。*
jsApiList: [
*// 所有要调用的 API 都要加到这个列表中*
'onMenuShareAppMessage',*//获取“分享给朋友”按钮点击状态及自定义分享内容接口。*
'chooseImage',*//获取手机相片接口*
'openLocation',*//获取微信地图接口*
'openAddress',
'onMenuShareTimeline'
]
});
*//所有的js调用接口都要放到下面的ready（）中。*
wx.ready(function () {
*// 在这里调用 API*
*//获取“分享给朋友”按钮点击状态，点击后发送给朋友微信，微信上的推送显示内容就是下面的数据*
wx.onMenuShareAppMessage({
title: '标题', *// 分享标题*
desc: '描叙', *// 分享描述*
link: '', *// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致*
imgUrl: '图片地址', *// 分享图标*
type: '', *// 分享类型,music、video或link，不填默认为link*
dataUrl: '', *// 如果type是music或video，则要提供数据链接，默认为空*
success: function () {
*// 用户确认分享后执行的回调函数*
},
cancel: function () {
*// 用户取消分享后执行的回调函数*
}
});
*//分享到朋友圈*
wx.onMenuShareTimeline({
title: '标题', *// 分享标题*
link: '', *// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致*
imgUrl: '图片地址', *// 分享图标*
success: function () {
*// 用户确认分享后执行的回调函数*
},
cancel: function () {
*// 用户取消分享后执行的回调函数*
}
});
});
</script>
备注：
此句话必须要引入，否则无法实现功能
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
分享给朋友和分享到朋友圈的title为分享标题，desc为分享的描叙，imgurl为分享的图片地址，这3个参数根据自己的需要进行填写就可以了。
在原有的代码中，加入以上代码后，就可以实现自由定义分享标题，描叙和图片的效果了。如下图所示
