1、要做什么呢
转换成 的效果。
2、一个微信公众号的分享,起初我的设想是使用微信内置浏览器JsAPI(WeixinJSBridge)来实现,但是我查了一下(
网上说:在这里有必要跟大家再说一下:这个API在以前公布的部分接口被官方和谐掉很久 了, 比如一键关注、分享给好友、分享到朋友圈等。当然,你可能会发现微信官方推送的一些文章还能使用这些功能,粗略估计,官方是对这个API增加了白名单控 制,判断Referer,如果是微信官方的地址、或者是有合作的商家地址,则允许调用,否则,返回“access denied”!),当时我也试过啦一次,发现没有效果,所以就放弃啦。
3、代码实现:
$(document).ready()
{
$.ajax({
type: "post",
dataType: "json",
async: false,
url: "<%=request.getContextPath()%>/mer/finShareConfig.do",//获取
data: {
merId:Request.QueryString('merId'),
url: encodeURIComponent(window.location.href.split("#")[0]) //encodeURIComponent(window.location.href.split("#")[0]) encodeURIComponent(URL.split('#')[0]) window.location.href.split('#')[0]
},
complete: function () { },
success: function (data) {
var data =data.map;
wx.config({
appId: data.appId,//APPID
timestamp: data.timestamp,//上面main方法中拿到的时间戳timestamp
nonceStr: data.nonceStr,//上面main方法中拿到的随机数nonceStr
signature: data.signature,//上面main方法中拿到的签名signature
//需要调用的方法接口
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ']
});
}
});
}
wx.error(function (res) {
});
wx.ready(function(){
var title=vm.activity.shareTitle;//查询你要分享的标题
var desc=vm.activity.shareDesc;//分享的描述
var sharePic =vm.config.value+'/upload'+vm.activity.sharePic;//分享的图片
wx.onMenuShareTimeline({
title: title, // 分享标题
desc: desc, // 分享描述
link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: sharePic, // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
}
});
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: sharePic, // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户点击了分享后执行的回调函数
}
});
wx.onMenuShareQQ({
title: title, // 分享标题
link:window.location.href, // 分享链接
imgUrl: sharePic, // 分享图标
shareUrl:window.location.href,
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// alert("失败")
// 用户取消分享后执行的回调函数
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
}
});
});
4、主要参考博客:
https://www.cnblogs.com/gamedaybyday/p/6207830.html