VUE2中实现微信分享功能

1、公众号配置：

如果你们的公众号有专人保管，那么跟他说把安全域名加一下，安全域名用于微信的验证，没有这一步操作，下面的都白搭。比如我们的测试公众号，绑定的就是我们测试服务器的域名。同理，生产也是如此。

2、后端配置VUE:

要想使用微信的JS-SDK功能，需要生成签名，配合appId才能使用，这些步骤通常是由后端生成的。这里省去3000字描述如何生成签名，反正你找后端同学就对了。

3、前端配置

终于轮到我们前端上场了，啰嗦了那么多，下面让我们正式起飞。

3.1安装微信JS-SDK

首先我们通过npm 安装 微信的js-sdk，当然你也可以在index.html页面中直接加<script>引用，哪种方式都可以。

npm install weixin-js-sdk --save

3.2微信JS-SDK初始化

接着，我们写一个微信初始化的方法，用来初始化微信的JS-SDK。该方法接受一个参数，用于传入后续调用的微信功能（如分享，获取地理位置等等）。因为微信的签名等数据是由后端同学生成的，所以我们需要通过ajax来获取这些数据。

在获取到后端同学的数据之后，我们调用wx.config方法，来校验是否可以使用微信的JS-SDK。注意，jsApiList是用来配置可以注册哪些微信功能的，这里举例了2个，一个是分享给朋友，一个是分享到朋友圈，其他功能请到微信JS-SDK文档中自行查看。之后我们调用wx.ready方法，用来处理验证成功后的事件。

wxRegister (callback) {
    let shareParam = {
      url: window.location.href.split("#")[0]
    };
    $.ajax({
      type: "post",
      url: share_path,
      data: shareParam,
      cache: false,
      dataType: 'json',
      success: function (data) {
        if(data.code == 200) {
          let appId = data.data.appId;
          let nonceStr = data.data.nonceStr;
          let signature = data.data.signature;
          let timestamp = data.data.timestamp;
          wx.config({
            debug: false,          // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: appId,         // 必填，公众号的唯一标识
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: nonceStr,   // 必填，生成签名的随机串
            signature: signature, // 必填，签名，见附录1
            jsApiList: [
              'onMenuShareTimeline',
              'onMenuShareAppMessage'
            ]
          });
        }
      },
      error: function (data) {
        //alert("请求异常");
      }
      //async: false
    });
    wx.ready(function (){
      // 如果需要定制ready回调方法
      if (callback) {
        callback()
      }
    })
  },

3.3微信分享到朋友圈

初始化之后，我们接着往下写，这里拿分享到朋友圈举例。写一个方法，用来调用微信的分享朋友圈。因为不同的页面分享的内容不一样，成功或者失败后的回调函数也不同，所以我们这里做个简单配置。传一个参数。

ShareTimeline (opstion) {
    //分享给朋友
    wx.onMenuShareAppMessage({
      title: opstion.title, // 分享标题
      link: opstion.link, // 分享链接
      imgUrl: opstion.imgUrl, // 分享图标
      desc: opstion.dec, // 分享描述
      success () {
        opstion.success()
      },
      cancel () {
        opstion.error()
      }
    });
    wx.onMenuShareTimeline({
      title: opstion.title, // 分享标题
      link: opstion.link, // 分享链接
      imgUrl: opstion.imgUrl, // 分享图标
      desc: opstion.dec, // 分享描述
      success () {
        opstion.success()
      },
      cancel () {
        opstion.error()
      }
    })
  }

3.4页面中调用微信功能

通过以上代码，我们封装了一个简单的微信JS-SDK功能，那么在页面中如何调用这些封装好的方法呢。首先我们编写一个方法用来作为wx.ready中的callback，然后在通过配置opstion的方式，将自定义信息注入到之前封装好的通用分享方法中。实现随用随调，灵活配置的微信功能。

wxShareTimeline () {
    let opstion = {
      title: '药渡药神', // 分享标题
      link: window.location.href+"?home=1",
      imgUrl: share_img,// 分享图标
      dec:'寻找希望，战胜病魔，药渡药神竭诚为您服务',
      success: function () {
      },
      error: function () {
      }
    }
    // 将配置注入通用方法
    wxApi.ShareTimeline(opstion)
  },