公众号h5页面分享并监测分享事件

公众号H5中需要做分享任务,需要监听分享成功事件,实现代码

<template>
  <div @click="toShare">111</div>
</template>

<script>
import wx from 'weixin-js-sdk'
import WechatService from 'service/wechat-service'
export default {
  data () {
    return {

    }
  },
  onLoad () {
    this.toShare()
  },
  methods: {
    toShare () {
      let url = location.href.replace(/&?code=\w+&state=\w*/, '')
      // 通过后台接口获取appid等
      WechatService.jsApi(url).then(res => {
        let wxconfig = res.data.data
        console.log(wxconfig)
        wx.config({
          debug: false, // 开启调试模式,
          appId: wxconfig.appId, // 必填,企业号的唯一标识,此处填写企业号corpid
          timestamp: wxconfig.timestamp, // 必填,生成签名的时间戳
          nonceStr: wxconfig.nonceStr, // 必填,生成签名的随机串
          signature: wxconfig.signature, // 必填,签名,见附录1
          jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
        })
        wx.ready(function () {
          wx.onMenuShareAppMessage({
            title: '来自简单的分享', // 分享标题
            desc: '测试分享功能', // 分享描述
            link: location.href.split('#')[0], // 分享链接
            imgUrl: '', // 分享图标
            type: 'link', // 分享类型,music、video或link,不填默认为link
            success: function () {
              alert('分享好友成功')
            },
            cancel: function () {
              alert('未分享!')
              console.log('分享失败')
            }
          })
          wx.onMenuShareTimeline({
            title: '来自简单的分享', // 分享标题
            desc: '测试分享功能', // 分享描述
            link: location.href.split('#')[0], // 分享链接
            imgUrl: '', // 分享图标
            type: 'link', // 分享类型,music、video或link,不填默认为link
            success: function () {
              alert('分享朋友圈成功')
            },
            cancel: function () {
              alert('未分享!')
              console.log('分享失败')
            }
          })
        })
      })
    }
  }
}
</script>

你可能感兴趣的:(vue)