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&copyright=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&copyright=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>
上一篇下一篇

猜你喜欢

热点阅读