2019-10-23 vue使用微信js-sdk转发
2019-10-23 本文已影响0人
执念_6afc
1 自己所踩过的坑
转发的函数需要在mounted中直接调用(即页面完成时直接调用)
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
export default {
mounted() {
this.share();
},
},
methods: {
// 转发朋友圈
share() {
var url = window.location.href.split("#")[0];//获取本页面的网址 原因:参与签名的网址需要截取#以前的 后台获取到的地址与前台参与签名的地址不符 导致签名不符
let data = {
pageUrl: url
};
this.$axios
.post("后台给的获取签名等的接口", data)
.then(({ data }) => {
let my = this;
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appid, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.noncestr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名
jsApiList: [
"updateTimelineShareData",
"onMenuShareTimeline",
"updateAppMessageShareData",
"onMenuShareAppMessage"
] // 必填,需要使用的JS接口列表
});
});
wx.ready(function() {
//需在用户可能点击分享按钮前就先调用
wx.onMenuShareAppMessage({
title: "123456", // 分享标题
desc: "分享描述分享描述分享描述分享描述分享描述", // 分享描述
link: window.location.href.split("#")[0], // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl:
"http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87%E5%B0%8F&step_word=&hs=0&pn=0&spn=0&di=80420&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=1635314034%2C1624773786&os=1397956597%2C2705229909&simid=0%2C0&adpicid=0&lpn=0&ln=1359&fr=&fmq=1570868694769_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined©right=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=15&oriquery=&objurl=http%3A%2F%2Fimg.jk51.com%2Fimg_jk51%2F375296673.jpeg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fp7fi75_z%26e3B3hc8_z%26e3Bv54AzdH3Fp7fi75AzdH3F8da8bm8m_z%26e3Bip4s&gsm=&rpstart=0&rpnum=0&islist=&querylist=&force=undefined", // 分享图标
success: function() {
shareSuccess();//成功回调 直接使用vue ajax请求无法发出去
}
});
wx.onMenuShareTimeline({
title: "123456",
link: window.location.href.split("#")[0],
imgUrl:
"http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87%E5%B0%8F&step_word=&hs=0&pn=0&spn=0&di=80420&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=1635314034%2C1624773786&os=1397956597%2C2705229909&simid=0%2C0&adpicid=0&lpn=0&ln=1359&fr=&fmq=1570868694769_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined©right=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=15&oriquery=&objurl=http%3A%2F%2Fimg.jk51.com%2Fimg_jk51%2F375296673.jpeg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fp7fi75_z%26e3B3hc8_z%26e3Bv54AzdH3Fp7fi75AzdH3F8da8bm8m_z%26e3Bip4s&gsm=&rpstart=0&rpnum=0&islist=&querylist=&force=undefined",
success: function() {
shareSuccess();
}
});
});
wx.error(function(res) {
// console.log("2");
});
}
}
};
function shareSuccess() {
if (sessionStorage.elogin == "true") {
$.ajax({
type: "POST",
url: "转发成功后回调的函数",
dataType: "json",
data: { id: sessionStorage.videoId },
xhrFields: {
withCredentials: true //携带cookie请求
},
crossDomain: true,
success: function(data) {
sessionStorage.videolink = data.data.vd_link;
window.location.reload();
},
error: function(data) {}
});
} else {
alert("请先登录");
}
}
</script>