vue微信分享 vue实现当前页面分享其他页面

针对"vue微信分享 vue实现当前页面分享其他页面"这一话题，我提供以下的完整攻略：

1. 微信分享的原理

微信分享的原理是通过wx.config和wx.ready两个JS-SDK函数的设置，将需要分享的内容传递给微信服务器，生成分享链接。生成的分享链接是根据当前页面的URL生成的，因此我们需要在不同页面上对应不同的分享信息进行设置。

2. 配置微信 JS-SDK

首先需要在项目根目录下创建.env文件，并在其中设置以下用于微信公众号开发的环境变量：

VUE_APP_WECHAT_APPID=你的微信公众号appid
VUE_APP_WECHAT_SECRET=你的微信公众号secret

然后在Vue项目的入口文件中引入微信JS-SDK文件，并在vueRouter中设置全局前置守卫。在每次切换路由的时候，都会调用全局前置守卫函数，从而重新配置微信JS-SDK。

// main.js
import wx from 'weixin-js-sdk'

// 配置微信 JS-SDK
function configWxSdk() {
  axios.post('/wechat/jsconfig', {
    url: window.location.href.split('#')[0]
  }).then(resp => {
    wx.config({
      debug: false,
      appId: process.env.VUE_APP_WECHAT_APPID,
      timestamp: resp.timestamp,
      nonceStr: resp.nonceStr,
      signature: resp.signature,
      jsApiList: [
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone'
      ]
    })
  })
}

// 设置全局前置守卫
router.beforeEach((to, from, next) => {
  configWxSdk()
  next()
})

3. 实现当前页面分享

对于当前页面的分享，我们可以在页面中通过vue-router提供的$route对象来获取当前页面的URL信息。然后在微信JS-SDK的wx.ready函数中进行分享设置。

// 某个页面组件中
methods: {
  shareToWechat() {
    const shareUrl = window.location.href.split('#')[0]

    wx.ready(() => {
      const shareData = {
        title: '分享标题',
        desc: '分享描述',
        link: shareUrl,
        imgUrl: '分享的图片链接',
        success: () => {
          console.log('微信分享成功')
        },
        cancel: () => {
          console.log('微信分享取消')
        }
      }

      wx.onMenuShareTimeline(shareData)
      wx.onMenuShareAppMessage(shareData)
      wx.onMenuShareQQ(shareData)
      wx.onMenuShareWeibo(shareData)
      wx.onMenuShareQZone(shareData)
    })
  }
}

4. 实现其他页面分享

对于其他页面的分享，我们可以通过传递参数的方式来实现。我们将需要分享的信息放在一个对象中，并将该对象序列化之后，拼接到跳转的URL后面。分享页面接收到URL之后，解析其中的参数，就可以通过微信JS-SDK进行分享了。

下面是一个在列表页中分享单个项的例子。

<!-- 列表页组件 -->
<template>
  <ul>
    <li v-for="(item, index) in itemList" :key="index">
      <h2>{{ item.title }}</h2>
      <button @click="shareItem(item)">分享</button>
    </li>
  </ul>
</template>

<script>
  export default {
    data() {
      return {
        itemList: [
          {
            title: '分享标题1',
            imgUrl: '分享图片1'
          },
          {
            title: '分享标题2',
            imgUrl: '分享图片2'
          },
          ...
        ]
      }
    },
    methods: {
      shareItem(item) {
        const shareData = {
          title: item.title,
          desc: '分享描述',
          link: `${window.location.href.split('#')[0]}?data=${encodeURIComponent(JSON.stringify(item))}`,
          imgUrl: item.imgUrl,
          success: () => {
            console.log('微信分享成功')
          },
          cancel: () => {
            console.log('微信分享取消')
          }
        }

        wx.ready(() => {
          wx.onMenuShareTimeline(shareData)
          wx.onMenuShareAppMessage(shareData)
          wx.onMenuShareQQ(shareData)
          wx.onMenuShareWeibo(shareData)
          wx.onMenuShareQZone(shareData)
        })
      }
    }
  }
</script>

在详情页中，我们需要根据URL中的参数来获取需要分享的数据。

<!-- 详情页组件 -->
<template>
  <div>
    <h2>{{ item.title }}</h2>
    <p>{{ item.content }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        item: {}
      }
    },
    mounted() {
      this.getItem()
    },
    methods: {
      getItem() {
        const dataStr = decodeURIComponent(this.$route.query.data)
        this.item = JSON.parse(dataStr)
      }
    }
  }
</script>

这样，我们就成功地实现了在Vue项目中，通过微信JS-SDK进行当前页面和其他页面的分享。