vue spa 实现微信自定义分享

最新推荐文章于 2025-02-27 19:56:38 发布

weixin_41355373

最新推荐文章于 2025-02-27 19:56:38 发布

阅读量496

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：微信分享 vue

本文链接：https://blog.youkuaiyun.com/weixin_41355373/article/details/98184308

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用微信JS-SDK实现网页分享功能，包括配置微信JS-SDK，调用后端接口获取分享参数，以及设置分享内容等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

utils/share.js

import wx from 'weixin-js-sdk'
import {fetchPost,fetchGet } from './http';

/**
 *分享
 * @param _this
 * @param shareTitle 标题
 * @param shareUrl 链接
 * @param shareImg 图片
 * @param shareDesc 描述
 */
export const Share = (_this, shareTitle, shareUrl, shareImg, shareDesc) => {
  fetchGet( '后端接口地址', {str: encodeURIComponent(window.location.href)}).then(res => {
      let data = res.data;
      wx.config({
        debug:false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.noncestr, // 必填，生成签名的随机串
        signature: data.signature, // 必填，签名，见附录1
        jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });
       var shareData = {
        title:shareTitle, // 分享标题
        desc: shareDesc, // 分享描述
        link:shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl:shareImg, // 分享图标
          success: function () {
              // 用户确认分享后执行的回调函数
          },
          cancel: function () {
              // 用户取消分享后执行的回调函数
          }
        }
      wx.ready(function () {
        wx.onMenuShareTimeline(shareData);
        wx.onMenuShareAppMessage(shareData);
      });
  }).catch(err => {
    console.log(err)
  })
};

组件中使用

import {Share, shareTitle, shareUrl, shareImg, shareDesc} from "../utils/share"；
//调用
Share(this, '自定义标题','分享链接', '自定义图片', 
    '描述信息');