如何设置html5页面，使得在微信分享中可以设置分享标题和描叙，以及图片。

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

小弟不才，东拼西凑了几行代码，现晒出来，共分享，希望能帮到有需要的人，也请大神指正不足。

废话少说，直接上代码。

1，文件头部引入以下php 代码

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("您的公众号appid", "您的公众号appsecret");//JSSDK中的参数是appid和appsecret。
$signPackage = $jssdk->GetSignPackage();//获取配置参数。
?>

备注：

a>项目头部引入的jssdk.php，下载地址：http://demo.open.weixin.qq.com/jssdk/sample.zip，可以参考以下官方文档

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115，

  微信JS-SDK说明文档这个章节的内容

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>

备注：

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

 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 

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

 

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

如果有兴趣的朋友，不妨一试吧！