美文网首页
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转发

    1 自己所踩过的坑转发的函数需要在mounted中直接调用(即页面完成时直接调用)

  • 微信公众号开发 ---- 微信jssdk开发示例

    概述 微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK,...

  • 利用fiddler将线上地址映射到本地代码

    在做微信网页开发的过程中使用了微信的JS-SDK,但是微信的JS-SDK需要在白名单的ip或者域名下调用才可以使用...

  • 微信公众号开发——JS-SDK扫一扫接口调用

    概述 微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK,网...

  • 微信公众号开发 JSSDK

    微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK,网页开发...

  • 微信分享

    微信分享 准备工作 如果想要是使用微信的分享功能,需要使用微信JS-SDK来完成。且只能点击微信右上角的...调起...

  • Vue使用微信JS-SDK实现微信支付

    最近做公众号开发,需要做充值功能调起微信支付,项目是Vue框架写的h5页面,研究了很多微信的官方文档和一些文章。终...

  • Vue 应用中使用微信 jssdk

    关于微信jssdk 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力...

  • 微信公众号开发(四)微信分享

    引言 如果想要使用微信的分享功能,需要使用微信 JS-SDK 来完成,并且只能通过点击微信右上角的...进行分享,...

  • H5微信分享的坑

    准备工作 如果想要是使用微信的分享功能,需要使用微信JS-SDK来完成。且只能点击微信右上角的...调起分享面板,...

网友评论

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

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