近年来,随着微信的崛起,我们难免会做一些微信自定义分享功能,然后让用户分享给朋友或者分享到朋友圈
话不多说,直接上代码,接图:
图一(①)
图二(②)
结果分享出来的就是图一的样子
现在我们想让①的链接和标题、图标都是②的样子,那么需要在h5分享页面做些设置
(微信公众平台的设置可以参考微信公众平台文档 )
首先在页面中引入:
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
1:HTML页面如下:
//分享链接
var currentHref = window.location.href;
//标题
var title = '标题';
//内容、描述
var discuss = '内容';
// 图片路径
var shareImgUrl = "http://xxx.com/images/1.png"; //要显示的图标在服务器的地址
//生成签名的时间戳
var timestamp;
//生成签名的随机串
var noncestr;
//签名
var signature;
//获取签名
$.ajax({
type: "GET",
url: "/wshare/getSignature",
data: {
"href": currentHref
},
success: function (data) {
var temp = JSON.parse(data);
timestamp = temp.timestamp;
noncestr = temp.noncestr;
signature = temp.signature.toLowerCase();
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: 'AppID', // 和获取Ticke的必须一样------必填,公众号的唯一标识
timestamp:timestamp, // 必填,生成签名的时间戳
nonceStr: noncestr, // 必填,生成签名的随机串
signature: signature,// 必填,签名,见附录1
jsApiList: [
'onMenuShareAppMessage','onMenuShareTimeline','onMenuShareTimeline','onMenuShareQQ','onMenuShareQZone'
] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function () {
//config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,
//config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关
//接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
//----------“分享给朋友”
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: discuss, // 分享描述
link: currentHref,
imgUrl: shareImgUrl, // 分享图标
success: function () {
},
cancel: function () {
}
});
//------------"分享到朋友圈"
wx.onMenuShareTimeline({
title: title, // 分享标题
desc: discuss, // 分享描述
link: currentHref, // 分享链接
imgUrl: shareImgUrl, // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数、
},
cancel: function () {