vue微信分享的实现(在当前页面分享其他页面)

下面我来详细讲解一下在Vue项目中实现微信分享的方法。

首先，我们需要在index.html中加入微信js-sdk的引入：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

然后，在项目中新建一个工具类，命名为wechat.js，来封装微信js-sdk的操作：

import Axios from "axios";
import { getBaseUrl } from "@/config/system.js";

/**
 * 初始化微信 config
 * @param {string} shareUrl 分享地址
 * @returns {Promise}
 */
async function initWechatConfig(shareUrl) {
  try {
    const res = await Axios.get(`${getBaseUrl()}/wxconfig`, {
      params: {
        url: shareUrl,
      },
    });
    const data = res.data;
    wx.config({
      debug: false,
      appId: data.appId,
      timestamp: data.timestamp,
      nonceStr: data.nonceStr,
      signature: data.signature,
      jsApiList: [
        "updateAppMessageShareData",
        "updateTimelineShareData",
        "onMenuShareTimeline",
        "onMenuShareAppMessage",
        "onMenuShareQQ",
        "onMenuShareWeibo",
        "onMenuShareQZone",
      ],
    });
    return Promise.resolve();
  } catch (error) {
    return Promise.reject(error);
  }
}

/**
 * 分享页面
 * @param {object} shareData 分享信息
 */
function sharePage(shareData) {
  wx.ready(() => {
    wx.onMenuShareTimeline(shareData); // 分享朋友圈
    wx.onMenuShareAppMessage(shareData); // 分享给朋友
    wx.onMenuShareQQ(shareData); // 分享到QQ
    wx.onMenuShareWeibo(shareData); // 分享到腾讯微博
    wx.onMenuShareQZone(shareData); // 分享到QQ空间
  });
}

export default {
  initWechatConfig,
  sharePage
};

在上面的工具类中，我们定义了初始化微信config以及分享页面的两个函数。

• initWechatConfig

该函数的作用是初始化微信config，其中需要传入分享地址shareUrl，后端需要在服务中实现获取微信签名的逻辑，并返回以下属性：

• appId：商户的微信AppId
• timestamp：时间戳
• nonceStr：随机字符串
• signature：签名

• jsApiList：需要使用的js函数列表

• sharePage

该函数的作用是分享页面，其中传入的参数shareData是一个对象，包含以下属性：

• title：分享的标题
• desc：分享的描述
• link：分享的链接地址
• imgUrl：分享的封面图片地址

接下来我们来看代码示例1，在当前页面中分享其他页面：

<template>
  <button @click="onShareClick">分享给好友</button>
</template>

<script>
import Wechat from "@/utils/wechat.js";

export default {
  methods: {
    async onShareClick() {
      const shareUrl = "https://example.com/sharepage";
      await Wechat.initWechatConfig(shareUrl); // 初始化微信config
      const shareData = {
        title: "分享标题",
        desc: "分享描述",
        link: shareUrl,
        imgUrl: "https://example.com/shareimg.png",
      };
      Wechat.sharePage(shareData); // 分享页面
    },
  },
};
</script>

在上面的代码示例中，我们定义了一个分享按钮，当用户点击该按钮时，会调用onShareClick方法来分享页面。

在该方法中，我们首先定义了分享页面的url，然后利用我们封装好的wechat函数来初始化微信config，并且设置分享页面的信息。

最后，我们调用了sharePage函数进行分享。

接下来，我们来看代码示例2，在Vue Router中分享当前路由页面：

<template>
  <button @click="onShareClick">分享当前页面</button>
</template>

<script>
import Wechat from "@/utils/wechat.js";
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["getShareUrl"]), // 从vuex中获取分享url
  },
  methods: {
    async onShareClick() {
      await Wechat.initWechatConfig(this.getShareUrl); // 初始化微信config
      const shareData = {
        title: "分享标题",
        desc: "分享描述",
        link: this.getShareUrl,
        imgUrl: "https://example.com/shareimg.png",
      };
      Wechat.sharePage(shareData); // 分享页面
    },
  },
};
</script>

在上面的示例中，我们获取了Vuex中定义的getShareUrl函数，该函数用于获取当前路由的分享地址。

在onShareClick方法中，我们利用我们封装好的wechat函数来初始化微信config，并且设置分享页面的信息。

最后，我们调用了sharePage函数进行分享。

以上就是Vue微信分享在当前页面分享其他页面的全部实现流程，如果在实际开发中遇到问题，也可以参考Vuex和Vue Router结合实现微信分享一文进行修正和优化。