vue 关于微信分享 / 我该怎么调用这些方法。。。

clipboard.png

  methods: {
      //微信分享使用方法
      wxInit() {
        let links = window.location.href;  //分享出去的链接
        let title = 'text';   //分享的标题
        let desc = 'ddddddddddd';  //分享的详情介绍
        wx.config({
          debug: false,
          appId: '11111111',
          timestamp: 1414587457,
          nonceStr: 'Wm3WZYTPz0wzccnW',
          signature: '0f9de62fce790f9a083d5c99e95740ceb90c27ed',
          jsApiList: [
            'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo'
          ]
        });
          //直接调用 这样能成功吗
        wx.ready(function () {
          // alert("done")
          // alert(title)
          wx.onMenuShareQQ({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: sd.cover, // 分享图标
            success: function () {
              // 分享纪录
              alert("成功分享给QQ")
            },
            cancel: function () {
              alert("分享失败,您取消了分享!")
            }
          });

          wx.onMenuShareTimeline({
            title: title, // 分享标题
            link: links, // 分享链接'
            imgUrl: sd.cover, // 分享图标
            success: function () {
              // 分享纪录
              alert("分享到朋友圈成功")
            },
            cancel: function () {
              alert("分享失败,您取消了分享!")
            }
          });
          //微信分享菜单测试
          wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: sd.cover, // 分享图标
            success: function () {
              // 分享纪录
              alert("成功分享给朋友")
            },
            cancel: function () {
              alert("分享失败,您取消了分享!")
            }
          });

          wx.onMenuShareWeibo({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: sd.cover, // 分享图标
            success: function () {
              // 分享纪录
              alert("成功分享给朋友")
            },
            cancel: function () {
              alert("分享失败,您取消了分享!")
            }
          });
        });
        wx.error(function (res) {
           alert("error")
          // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
        });
      },

一脸懵逼/ 不知道。 怎么去实现。。 求大神帮忙讲解讲解。。

回答:

wx.config 不能随便填
wx.config 不能随便填
wx.config 不能随便填
重要的事情说三遍
配置通过后才能调用微信其他接口

详细的可以看微信的文档https://mp.weixin.qq.com/wiki…

微信官方demo: http://203.195.235.76:8080/js…

回答:

在生命周期里调用 mounted

回答:

;(function() {
  var hrefUrl = window.location.href;
  //ajax根据当前页面url,来获取jssdk签名和其它配置信息,需要服务端配合(写个接口)!!!!!!
  $.ajax({
    url: "http://www.xxxxx.com/index.php?welcome/getwxsdk",
    type: "post",
    data: {
      pageUrl: hrefUrl.split('#')[0]
    },
    dataType: 'json',
    success: function success(data) {
      wx.config({
        debug: false,
        appId: data.appId,
        timestamp: data.timestamp,
        nonceStr: data.nonceStr,
        signature: data.signature,
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'chooseImage','uploadImage','startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice']
        // 所有要调用的 API 都要加到这个列表中
      });
    }
  });

  function wxShare(dataForWeixin){
    wx.ready(function() {
      // 2. 分享接口
      // 2.1 监听“分享给朋友”,按钮点击、自定义分享内容及分享结果接口
      wx.onMenuShareAppMessage({
        title: dataForWeixin.title,
        desc: dataForWeixin.desc,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        trigger: function trigger(res) {},
        success: function success(res) {
          //alert('已分享');
          dataForWeixin.success && dataForWeixin.success();
        },
        cancel: function cancel(res) {
          //alert('已取消');
          dataForWeixin.cancel &&   dataForWeixin.cancel();
        },
        fail: function fail(res) {
          //alert(JSON.stringify(res));
          dataForWeixin.fail && dataForWeixin.fail();
        }
      });

      // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
      wx.onMenuShareTimeline({
        title: dataForWeixin.title,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        trigger: function trigger(res) {
          // alert('用户点击分享到朋友圈');
        },
        success: function success(res) {
          //alert('已分享');
          dataForWeixin.success && dataForWeixin.success();
        },
        cancel: function cancel(res) {
          //alert('已取消');
          dataForWeixin.cancel &&   dataForWeixin.cancel();
        },
        fail: function fail(res) {
          //alert(JSON.stringify(res));
          dataForWeixin.fail && dataForWeixin.fail();
        }
      });

      wx.onMenuShareQQ({
        title: dataForWeixin.title,
        desc: dataForWeixin.desc,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        trigger: function trigger(res) {
          //alert('用户点击分享到QQ');
        },
        complete: function complete(res) {
          //alert(JSON.stringify(res));
        },
        success: function success(res) {
          //alert('已分享');
          dataForWeixin.success && dataForWeixin.success();
        },
        cancel: function cancel(res) {
          //alert('已取消');
          dataForWeixin.cancel &&   dataForWeixin.cancel();
        },
        fail: function fail(res) {
          //alert(JSON.stringify(res));
          dataForWeixin.fail && dataForWeixin.fail();
        }
      });

      // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
      wx.onMenuShareWeibo({
        title: dataForWeixin.title,
        desc: dataForWeixin.desc,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        trigger: function trigger(res) {
          //alert('用户点击分享到微博');
        },
        complete: function complete(res) {
          // alert(JSON.stringify(res));
        },
        success: function success(res) {
          //alert('已分享');
          dataForWeixin.success && dataForWeixin.success();
        },
        cancel: function cancel(res) {
          // alert('已取消');
          dataForWeixin.cancel &&   dataForWeixin.cancel();
        },
        fail: function fail(res) {
          // alert(JSON.stringify(res));
          dataForWeixin.fail && dataForWeixin.fail();
        }
      });
    });
  }
  (window.wxShare) || (window.wxShare = wxShare);
})();

//将上面js插入到html中,在需要的时候直接调用
window.wxShare  && window.wxShare({
    title: '分享标题',
    desc:  '分享描述',
    link:  '分享链接',
    imgUrl: '分享图片链接',
    success:function(){  //可以不传
    },
    cancel:function(){  //可以不传
    }
})

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注