美文网首页
2019-10-23 vue使用微信js-sdk转发

2019-10-23 vue使用微信js-sdk转发

作者: 执念_6afc | 来源:发表于2019-10-23 09:51 被阅读0次

    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>

    相关文章

      网友评论

          本文标题:2019-10-23 vue使用微信js-sdk转发

          本文链接:https://www.haomeiwen.com/subject/qsehvctx.html