微信公众号分享朋友圈或是朋友

主要参考文档-微信公众号平台：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

1步骤：添加接口文档 

//获取微信凭证

getToken() {
  console.log(window.location.href)
  let params = new URLSearchParams();
  let url = window.location.href.split('#')[0]
  params.append('url', url)
  return axios({
    method: "POST",
    url: '/jssdkParamter',
    data: params
  })
},

2 下载安装：weixin-jsapi

cnpm install weixin-jsapi  --save-dev

3、引入

import wx from 'weixin-jsapi'

4、在mounted或是created中使用

//自定义分享
this.$api.getToken().then(data => {
  var that = this;
  //需要后台返回来的数据
  wx.config({
    debug: false,//true:调试时候弹窗
    appId: data.data.appId, // 必填，公众号的唯一标识   微信appid
    timestamp: data.data.timestamp, // 必填，生成签名的时间戳，精确到秒
    nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
    signature: data.data.signature, // 必填，签名
    jsApiList: ['scanQRCode', 'updateAppMessageShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline']
  })
  wx.ready(function () {

    wx.onMenuShareAppMessage({
      title: '拼团果',
      desc: '莱田洗碗机 可以查看好友或是自己的拼团结果，我们有最好最优惠的产品，赶快加入我们吧 可以查看好友或是自己的拼团结果，我们有最好最优惠的产品，赶快加入我们吧！！！！！！！',
      link: window.location.href.split('#')[0].split('?')[0] + '#' + window.location.href.split('#')[1],
      type: 'link',
      imgUrl: 'http://fupin.91xiaokong.com/images/dishwasher_img/images/mcbg.png',
      success() {
        setTimeout(function () {
          that.shareActionHT();
        }, 700)
      },
      cancel: function (res) {
        alert('你没有分享给朋友');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }

    });
    wx.onMenuShareTimeline({
      title: '拼团果',
      desc: '莱田洗碗机 可以查看好友或是自己的拼团结果，我们有最好最优惠的产品，赶快加入我们吧 可以查看好友或是自己的拼团结果，我们有最好最优惠的产品，赶快加入我们吧！！！！！！！',
      link: window.location.href.split('#')[0].split('?')[0] + '#' + window.location.href.split('#')[1],
      imgUrl: 'http://fupin.91xiaokong.com/images/dishwasher_img/images/cbA02.png',
      success() {
        setTimeout(function () {
          that.shareActionHT();
        }, 700)


      },
      cancel: function (res) {
        alert('你没有分享给朋友');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
    wx.error(function (res) {
      alert(res.errMsg);  //打印错误消息。及把 debug:false,设置为debug:true就可以直接在网页上看到弹出的错误提示
    });

  })
})

5、分析
 a 主要在成功分享成功之后 需要再通知后台 分享已经成功，后台主要是为了给他添加分享之后的积分，我在methods事件中这里定义了一个函数，以便调取使用。

shareActionHT() {
  this.$api.deviceShare().then((ret) => {

    if(ret.status==200){
      alert(ret.data.message);
    }else {
      alert(ret.data.message);
    }
  })
}

但是 在调取该函数时一直没有执行，最后 设置一个延时器，最后通知成功，主要原因是 分享成功之后 和 通知后台 他们是属于同步执行，添加延时器 可以进行执行，
这一点是非常的重要。
b 还有就是 分享成功之后需要再朋友圈中显示提前准备好的图片，而不是自带的默认的图片，

imgUrl：''中要重新添加对应的图片。