vue项目history模式下微信分享相关问题

import wx from '@/utils/wx'
import { shareApi } from '@/api'

// 微信验证
export function requireConfig() {
  let url = window.location.href

  shareApi.share({
    url: url
  }).then(res => {
    if (res.code === 200) {
      wx.config({
        debug: false,
        appId: res.data.appid, // 必填,企业号的唯一标识,此处填写企业号corpid
        timestamp: res.data.timestamp, // 必填,生成签名的时间戳
        nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
        signature: res.data.signature, // 必填,签名,见附录1
        jsApiList: [
          'onMenuShareTimeline',
          'onMenuShareAppMessage'
        ]
      })
    }
  })
}

// 验证分享
export function requireShare(title, desc, link, imgUrl) {
  let u = navigator.userAgent
  // 安卓需要重新验证
  if (u.indexOf('Android') > -1) {
    requireConfig()
  }

  wx.ready(function() {
    // 分享给朋友
    wx.onMenuShareAppMessage({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: `http://share.tcm317.com${link}`, // 分享链接
      imgUrl: imgUrl, // 分享图标
      type: '', // 分享类型,music、video或link,不填默认为link
      dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
      success: function() {
        // 用户确认分享后执行的回调函数
      },
      cancel: function() {
        // 用户取消分享后执行的回调函数
      }
    })
    // 分享给朋友圈
    wx.onMenuShareTimeline({
      title: title, // 分享标题
      link: `http://share.tcm317.com${link}`, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success: function() {
        // 用户确认分享后执行的回调函数
      },
      cancel: function() {
        // 用户取消分享后执行的回调函数
      }
    })
  })
}

 

APP.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import { requireConfig } from '@/utils'

export default {
  data() {
    return {

    }
  },
  mounted() {
    requireConfig()
  },
  methods: {

  }
}
</script>

<style lang="scss">

</style>

需要分享的页面

  requireShare(
     '分享标题',
     '分享简介',
     '分享地址',
     '分享封面'
   )

 

posted @ 2018-11-21 16:26  这个男人  阅读(673)  评论(0编辑  收藏  举报