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

问题

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

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

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

解决办法

1、必须有认证的公众号

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

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

公众号已认证的样子

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

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

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

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

设置JS接口安全域名

3、设置IP白名单

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

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

设置IP白名单

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

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

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

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

微信JS-SDK说明文档

5、代码来了

JSSDK文档

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

选择PHP文件夹

1，文件头部引入以下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，文件结尾引入以下代码：

*//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 () {

*// 用户取消分享后执行的回调函数*

}

});

});

备注：

此句话必须要引入，否则无法实现功能

分享给朋友和分享到朋友圈的title为分享标题，desc为分享的描叙，imgurl为分享的图片地址，这3个参数根据自己的需要进行填写就可以了。

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

完美