vue 微信分享

场景：一个h5界面要求点击右上角三个点后点击微信好友分享带标题和图片给好友。vue项目中，分享携带头部标题、简介和缩略图等信息。

1、下载微信的 weixin-js-sdk

npm install weixin-js-sdk

2、在需要分享的页面引入

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

3、在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', // 分享到朋友圈
          ]
        });
 
        wx.ready(() => {
          var shareData = {
            title: '王者归来-王者突破特训营',
            desc: '帮助青铜早日登上王者之路',
            link: https://www.baidu.com/, // 分享后的地址
            imgUrl:
              '分享出去的图片地址'
          };
          //点击要去分享
          wx.updateAppMessageShareData(shareData);
          wx.updateTimelineShareData(shareData);
        });
      });
    }

4、在 mounted 中调用分享的方法

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

5、判断微信浏览器打开

分享的时候要去判断是否是微信浏览器打开，如果不是要提示不能分享。

var broser = window.navigator.userAgent.toLowerCase();
  //通过正则表达式匹配broser 中是否含有MicroMessenger字符串
  if (broser.match(/MicroMessenger/i) == 'micromessenger') {
    console.log('微信浏览器');
    // this.weixin();
    this.showContent = true;
  } else {
    this.$toast.warn('请使用微信浏览器打开');
  }

重要说明：注意h5分享是使用微信浏览器右上角的三个点进行分享的，在点击右上角之前要先注入config/ready,官网已说明。自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）*需在用户可能点击分享按钮前就先调用。

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
});

扩展知识点：

//使用后端拿到的数据配置wxconfig
 wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: res.appId, // 必填，公众号的唯一标识，填自己的！
  timestamp: res.timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
  nonceStr: res.nonceStr, // 必填，生成签名的随机串
  signature: res.signature, // 必填，签名，见附录1
  jsApiList: [
   'onMenuShareTimeline',
   'onMenuShareAppMessage'
  ]
 });
 
 
wx.ready(function () { //如果wx.config配置正常，会自动走此处
    console.log('ready执行完毕')
    //自定义“分享给朋友”及“分享到QQ”按钮的分享内容
    wx.updateAppMessageShareData({
      title: option.shareTitle,//分享的标题
      desc: option.shareDesc,//分享的描述信息
      link: option.shareUrl,//分享的url
      imgUrl: option.shareImg//分享的图片
    });
    //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分
    wx.updateTimelineShareData({
      title: option.shareTitle,
      desc: option.shareDesc,
      link: option.shareUrl,
      imgUrl: option.shareImg,
    });
 });

出处：Vue项目-开启 “ 微信分享踩坑” 之旅-vue项目实现微信分享页面 (51cto.com)