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

Posted 2021-01-21 这个男人

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(
     ‘分享标题‘,
     ‘分享简介‘,
     ‘分享地址‘,
     ‘分享封面‘
   )