VUE项目实现微信分享功能

在项目中实现涉及微信公众号开发的部分的时候，真的是愁掉头。

首先要有公众号

公众号一般都是公司特定的人去管理，前端一般没有权限，需要在公众号后台的安全域名中加上现在的域名，这是第一步，最基础的一步。

然后获取授权、并拿到openid以及分享参数

获取授权的部分需要前端和后端共同完成的。首先我们要获取到微信方授权的code码，然后传给后端，让后端去向微信请求数据noncestr、jsapi_ticket、timestamp、signature，然后再返回给我们，用于我们写分享功能。

PS：(这部分数据前端是获取不到的，微信开发文档中是这么写的)

官方手册截图

总而言之一句话，拿着code码去向后端小伙伴要数据。
code码的获取方式见我的另外一篇文章：H5在微信中获取code及openid。

分享给朋友、分享到朋友圈实操

到这一步就是需要我们前端独立完成的部分了，所有东西都准备好了。
（不用再去追着后端要数据了，剩下的东西我们自己就可以完成了）

1、安装js-sdk

//vue项目中像安装其他依赖一样在命令行输入就可以，也可以script引入
npm install weixin-js-sdk --save

2、js-sdk初始化

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

getShareInfo(tit,fxUrl){//如果分享的内容会根据情况变化，那么这里可以传入分享标题及url
      var data={//请求参数
        url : this.jmUrl,
        token : this.token,
        code : this.code
      }
      getShare(data)//这里我写了一个公用的接口请求js，这里正常axios请求就可以，只要拿到数据都可以
          .then(res => {
            localStorage.setItem("jsapi_ticket", res.jsapi_ticket);
            //拿到后端给的这些数据
            let appId = res.appId;
            let timestamp = res.timestamp;
            let nonceStr = res.noncestr;
            let signature = res.signature;
            wx.config({
              debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: 'wx56a464621c6314a',         // 必填，公众号的唯一标识，填自己的！
              timestamp: timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
              nonceStr: nonceStr,   // 必填，生成签名的随机串
              signature: signature, // 必填，签名，见附录1
              jsApiList: [
                'onMenuShareTimeline',
                'onMenuShareAppMessage'
              ]
            })
            
            wx.ready(function () {
                //分享到朋友圈
                wx.onMenuShareTimeline({
                  title: tit,   // 分享时的标题
                  link: fxUrl,     // 分享时的链接
                  imgUrl: _this.pic,    // 分享时的图标
                  success: function () {
                    console.log("分享成功");
                  },
                  cancel: function () {
                    console.log("取消分享");
                  }
                });
                //分享给朋友
                wx.onMenuShareAppMessage({
                  title: tit,
                  desc: '这件商品终于优惠了，每件只需'+pri_fx+'元', 
                  link: fxUrl,
                  imgUrl: _this.pic,
                  type: '',
                  dataUrl: '', 
                  success: function () {
                    console.log("分享成功");
                  },
                  cancel: function () {
                    console.log("取消分享");
                  }
                });
            })
      })
}

调用分享函数

this.getShareInfo(this.title,this.url);

这样分享的函数和url就可以在不同情况进行自定义啦！