vue项目中,实现微信分享

/* 微信分享 */
Vue.prototype.wechatShare = (shareData) => {
  let resource = {
    title: '随我心愿!',
    desc: '体验优质服务',
    link: 'https://www.abc.cn/',
    img: 'https://www.abc.cn/images/share_logo.jpg'
  }
  let obj = Object.assign({}, resource, shareData)
  let params = {url: window.location.href}
  $post('/vue/weixinjiekou', params).then(data => {
    // 分享标题等参数
    const shareTitle = obj.title
    const shareDesc = obj.desc
    const shareLink = obj.userShare ? obj.link + data.flag : obj.link
    const shareImgUrl = obj.img
    const config = {
      title: shareTitle, // 分享标题
      desc: shareDesc, // 分享描述
      link: shareLink, // 分享链接
      imgUrl: shareImgUrl, // 分享图标
      type: '', // 分享类型,music、video或link,不填默认为link
      dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
      success: function () {},
      cancel: function () {}
    }
    wechat.config({
      debug: false,
      appId: data.appid, // 和获取Ticke的必须一样------必填,公众号的唯一标识
      timestamp: data.timestamp, // 必填,生成签名的时间戳
      nonceStr: data.noncestr, // 必填,生成签名的随机串
      signature: data.signature, // 必填,签名,见附录1
      // 需要分享的列表项:发送给朋友,分享到朋友圈,分享到QQ,分享到QQ空间
      jsApiList: [
        'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo',
        'onMenuShareQZone', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice',
        'pauseVoice', 'stopVoice', 'onVoicePlayEnd', 'uploadVoice', 'downloadVoice',
        'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'translateVoice',
        'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu',
        'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem',
        'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard',
        'chooseCard', 'openCard'
      ]
    })
    // 处理验证失败的信息
    wechat.error(function (res) {
      console.log('验证失败返回的信息:', res)
    })
    // 处理验证成功的信息
    wechat.ready(function () {
      // 分享给朋友
      wechat.onMenuShareAppMessage(config)
      // 分享到朋友圈
      wechat.onMenuShareTimeline(config)
      // 分享到qq
      wechat.onMenuShareQZone(config)
      // 分享到微博
      wechat.onMenuShareWeibo(config)
      // 分享到qq空间
      wechat.onMenuShareQZone(config)
    })
  })
}

微信接口信息

{
  "result": {
    "appid": "appid",
    "noncestr": "随机串",
    "signature": "签名",
    "timestamp": 时间戳,
    "flag": 6
  },
  "status": "y"
}

发布了118 篇原创文章 · 获赞 23 · 访问量 20万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览