VUE 分享给好友及朋友圈

VUE 分享给好友及朋友圈

项目场景：一个h5界面要求点击右上角三个点后点击微信好友分享带标题和图片给好友

---

步骤如下：

一、下载 weixin-js-sdk

cnpm i weixin-js-sdk --save

二、页面引入

import wx from 'weixin-js-sdk'; // 引入wxjs
import { shares } from '@/api/index'; // 分享的接口  传给后端一个地址(与域名一致)

三、在 methods 中定义方法

// vue调用微信的自定义分享
    getShareInfo() {
       this.save = {
          url: location.href.split('#')[0] // 只需要传地址就好，其他后端都会写好来
        };
      shares(this.save).then(res => {
        const config = res.data;
        wx.config({
          appId: config.appId,  // appID 公众号的唯一标识
          timestamp: config.timestamp, // 生成签名的时间戳
          nonceStr: config.nonceStr, //  生成签名的随机串
          signature: config.signature, // 生成的签名
          jsApiList: [
            'updateAppMessageShareData',
            'updateTimelineShareData',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone',
          ]
        });

        wx.ready(() => {
          var shareData = {
            title: '王者归来-王者突破特训营',
            desc: '帮助青铜早日登上王者之路',
            link: window.location.href,
            imgUrl:
              '分享出去的图片地址'
          };
          //点击要去分享
          wx.updateAppMessageShareData(shareData);
          wx.updateTimelineShareData(shareData);
          wx.onMenuShareTimeline(shareData);
          wx.onMenuShareAppMessage(shareData);
          wx.onMenuShareQQ(shareData);
          wx.onMenuShareWeibo(shareData);
          wx.onMenuShareQZone(shareData);
        });
      });
    }

四、在 mounted 中调用方法

 mounted() {
    this.getShareInfo(); // 调用分享的事件
  },

以上就是实现的 具体步骤 希望对你有所帮助