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

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

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

废话少说,直接上代码。

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

require_once"jssdk.php";

$jssdk =newJSSDK("您的公众号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,文件结尾引入以下代码:

//wx表示一个js-sdk构建的一个对象。config()是它的一个方法,这个接口用来验证配置。

wx.config({

debug:false,//true表示每调用一个接口信息都会在页面alert一段字符串。方便测试过程中国是否能正确调用接口。

appId:'',

timestamp:,

nonceStr:'',

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

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

}

});

});

备注:

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

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

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

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

如果有兴趣的朋友,不妨一试吧!

你可能感兴趣的:(如何设置html5页面,使得在微信分享中可以设置分享标题和描叙,以及图片。)