微信中分享页面已经是很流行的一种方式，那么如何可以让自己做的h5页面能设置分享标题、描叙和图片呢？

问题

第三方网站在微信中分享的链接想要左边有简介概述，右边有缩略图，没有缩略图不能引起客户足够的重视。尤其不利于分享朋友圈和用户转发.一个看上去不正规的链接终究难于进行传播和宣传推广。

案例如下图,请查看描述和缩略图

上图显示无法缩略图，看上去很不正规的样子。

解决办法

1、必须有认证的公众号

首先,必须要有认证过的微信公众号，因为在接口权限中，没有认证过的公众号是没有权限进行分享有缩略图的，在此可以看下自己微信公众平台的接口权限中自己是否有以下权限。如果有，恭喜，就可以进行下一步的操作了

具体认证过程请到微信开放平台去查询。

公众号已认证的样子

2、设置域名到JS接口安全域名

如果有权限的话,进行下一步，配置微信公众号的基本配置，进入微信公众号配置里面的功能设置,然后设置自己的域名到JS接口安全域名。

注意设置的时候需要下载一个文本放在自己FTP的根目录上进行验证权限。

配置好的JS接口安全域名显示 设置JS接口安全域名

3、设置IP白名单

设置好了之后,进入设置----安全中心-----IP白名单,填写自己的网站ip(一定要是备案过的)

上面设置好了基本上就需要在服务器上进行开发配置了,最重要的事需要有自己的公众号appid和AppSecret,有了这个才能进行下一步的开发。

设置IP白名单

4、查看微信JS-SDK说明文档

有了这个之后,访问腾讯开发者中心查看各个开发环境的具体开发步骤，一般都有开发样例源码的，可以进行查看

进入公众号开发者文档主页

进入主页在微信网页开发----微信JS-SDK说明文档栏目下可查看教程。

微信JS-SDK说明文档

5、代码来了

下载需要的文档 链接如下：
http://demo.open.weixin.qq.com/jssdk/sample.zip

JSSDK文档

解压后选择你的开发语言版本。

选择PHP文件夹

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个参数根据自己的需要进行填写就可以了。

在原有的代码中，加入以上代码后，就可以实现自由定义分享标题，描叙和图片的效果了。如下图所示

完美