1.效果图对比
2.之前踩过的坑
页面设置一个隐藏的图片,宽高都是300像素,微信就会抓取这张图片做为分享图片
结果: 并没有什么效果,原因:微信对自定义分享内容作了限制,最终还是要依靠配置wx.config。
3.详细看了一边官方的文档:
链接:mp.weixin.qq.com/wiki?t=reso…ain&id=mp1421141115
看一遍,觉得自己的智商似乎下线了,一脸蒙状态
4.摸索半天,+++无数次骚扰度娘以后,差不多摸清楚了,everybody跟我走起哈(自己的项目是react框架,主要差不多,其他的根据自己的需求自行调整哈)
(1)准备,设置js接口安全域名
(2)引入JS文件
(4)根据分享的要求,按照官方的接口调取写法,*发挥啦啦啦~~~~
wx.config({
debug:false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: json.appId, // 必填,公众号的唯一标识
timestamp:json.timestamp , // 必填,生成签名的时间戳
nonceStr: json.nonceStr, // 必填,生成签名的随机串
signature: json.signature,// 必填,签名
jsApiList: [
'onMenuShareTimeline', 'onMenuShareAppMessage',
'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'
] // 必填,需要使用的JS接口列表
});
wx.ready(function() {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,
// 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
//分享到朋友圈
wx.onMenuShareTimeline({
title:shareTitle, // 分享标题
link:location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl:"https://jinshang-hz.oss-cn-hangzhou.aliyuncs.com/data/share/images/recruit_action.jpg", // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
console.log("11");
},
});
//分享给朋友
wx.onMenuShareAppMessage({
title:shareTitle, // 分享标题
desc:mySlogon, // 分享描述
link:location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: "https://jinshang-hz.oss-cn-hangzhou.aliyuncs.com/data/share/images/recruit_action.jpg", // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户点击了分享后执行的回调函数
console.log("22");
}
});
5.参考文章
(1)[http://www.cnblogs.com/stoneniqiu/p/6286599.html]()
(2)[https://blog.csdn.net/HaleyLiu123/article/details/78002835?locationNum=4&fps=1]()
复制代码
灰常感谢前面踩坑的前辈们的分享~~~~