Vue项目-开启 “ 微信分享踩坑” 之旅

wx.config({
  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的 JS 接口列表
});

wx.ready(function(){
  // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
});

npm install weixin-js-sdk --save

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

// 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);
        });
      });
    }

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

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('请使用微信浏览器打开');
  }

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,
    });
 });