简单粗暴教你在VUE中引入微信SDK 调用微信分享、朋友圈分享、QQ分享......

写在前面：

刚做了一个微信端的网页，用到了微信分享，在网上看了好多的资料，发现好多文档都写得云里雾里，让人看的头疼。通过对很多大佬文章的综合整理，才完成了微信分享的部分。所以我想着自己写一篇文章，能让看到我这篇文章的亲们能够清楚的明白在vue上怎么使用微信分享SDK，能够按照我写的步骤简单粗暴的实现
备注：本人还是个菜鸟，刚刚接触vue 文章中有错误或者大家对我有建议，随意的提出来，我好改正，谢谢大家！

1.安装sdk

  npm install weixin-js-sdk --save

2. 在main.js入口文件中引入微信sdk

  import wx from 'weixin-js-sdk'

3.在main.js的生命周期函数（created()或mounted()）中引入微信sdk配置代码那就是全局的，也可以在你想要分享的.vue组件中引入微信sdk配置代码这样微信分享只在这个组件有效

4.通过config接口注入权限验证配置（一般后台会提供接口，获取接口后对应上就好，这个权限验证也可以放到一个公用js中这样不同的组件都可以复用这个配置）

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

5.通过ready接口处理成功验证（如果每个组件要应用不同的分享内容那么这个ready接口就在不同组件的生命周期函数中配置就好)

  wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）最新接口
    wx.updateAppMessageShareData({ 
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
        success: function () {
          // 设置成功
        }
  // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）最新接口     
    wx.updateTimelineShareData({ 
        title: '', // 分享标题
        link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
        success: function () {
          // 设置成功
        }
  });

本人也是VUE的菜鸟，谢谢大家查看和使用本文档，如果文档中有什么问题，希望大家能指正出来，我好及时修正，谢谢你