需求

近来在做一个项目需求，分享领好书运动，猎取用户的个人信息以及unionID，并引诱用户分享给挚友或朋侪圈，到达裂变拉新的目标。在做的过程当中碰到了一些坑的处所，所以回过来总结一下

手艺计划

运用微信JS-SDK自定义分享到挚友和分享到朋侪圈

完成步骤

1、要完成微信H5网页自定义分享功用，必需先熟习下微信民众平台开辟文档，细致文档内里说的很细致，这里说下须要注重的点，别忘了绑定开辟者权限，另有绑定js平安域名，要不然有能够会报redirect_uri参数毛病。

2、起首平常在做微信H5网页运动，都须要猎取用户的个人信息，这就须要用户受权，平常受权有两种体式格局，一种是寂静受权，一种是网页受权，这个在微信开辟文档说的很细致。

关于已关注民众号的用户，假如用户从民众号的会话或许自定义菜单进入本民众号的网页受权页，即使是scope为snsapi_userinfo，也是寂静受权，用户无感知

平常网页受权流程分为四步：

①指导用户进入受权页面赞同受权，猎取code

②经由过程code调换网页受权access_token（与基本支撑中的access_token差别）

③假如须要，开辟者能够革新网页受权access_token，防止逾期

④经由过程网页受权猎取用户基本信息（openid 、UnionID、个人头像、性别、省市、微信昵称等）

3、下面是细致完成代码，说下也许思绪，经由过程推断参数是不是在微信浏览器中翻开，是不是让用户受权，并重定向到微信的接口拿到code后经由过程接口传给后端返回用户的基本信息。

// 用户受权
 if (this.$route.query.from) {
      // 跳转微信页面
        let _nowUrl = window.location.href.split("?")[0] +`?pictureId=${this.$route.query.pictureId}`; // 参数拼接
        let _shareUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=微信民众号APPID&redirect_uri=${encodeURIComponent(_nowUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
        window.location.href = _shareUrl; // 重定向到这个定义的URL
    }
    // 经由过程code猎取用户信息
    if (this.$route.query.code) {
      let _code = this.$route.query.code;
      this.handleWechatMsg(_code);
    }

4、接下来就是怎样自定义分享给挚友或许朋侪圈，一样也是根据挪用微信开辟文档上说的举行设置和挪用。在挪用分享接口胜利以后最先挪用分享api，并在挪用胜利以后的回调函数实行跳页，这里微信那里做了限定，假如用户在点击分享的时刻取消了，默许照样走success胜利回调函数，是拿不到终究分享胜利的状况。下面是完成分享的细致代码

// 分享给朋侪或朋侪圈
    wxChatShare(param) {
      var that = this;
      let _url = encodeURIComponent(param.url);
      apiUrl.wechatConfig(_url).then(res => {
          if (res.data.code == 200) {
              wx.config({
                debug: false,
                appId: res.data.content.appid,
                timestamp: res.data.content.timestamp, // 必填，天生署名的时候戳
                nonceStr: res.data.content.nonceStr, // 必填，天生署名的随机串
                signature: res.data.content.signature, // 必填，署名
                jsApiList: [
                  "onMenuShareTimeline",
                  "onMenuShareAppMessage"
                  // "updateAppMessageShareData",
                  // "updateTimelineShareData"
                ]
              });
              // wx.ready(function() {
              //分享到朋侪圈
              wx.onMenuShareTimeline({
                title: param.title, // 分享题目
                link: param.link, // 分享链接，该链接域名或途径必需与当前页面对应的民众号JS平安域名一致
                imgUrl: param.imgUrl, // 分享图标
                success: function() {
                  // 用户点击了分享后实行的回调函数
                 that.$Message.message("分享胜利!");
                  that.toRouter();
                }
              });
              //分享到挚友
              wx.onMenuShareAppMessage({
                title: param.title, // 分享题目
                desc: param.desc, // 分享形貌
                link: param.link, // 分享链接，该链接域名或途径必需与当前页面对应的民众号JS平安域名一致
                imgUrl: param.imgUrl, // 分享图标
                type: param.type, // 分享范例,music、video或link，不填默许为link
                dataUrl: param.dataUrl, // 假如type是music或video，则要供应数据链接，默许为空
                success: function() {
                  // 用户点击了分享后实行的回调函数
                  that.$Message.message("分享胜利!");
                  that.toRouter();
                }
              });

              // wx.updateTimelineShareData({
              //   title: param.title, // 分享题目
              //   link: param.link, // 分享链接，该链接域名或途径必需与当前页面对应的民众号JS平安域名一致
              //   imgUrl: param.imgUrl, // 分享图标
              //   success: function(res) {
              //     // 设置胜利
              //     that.$Message.message("设置胜利!");
              //     that.toRouter();
              //   }
              // });

              // //分享给朋侪
              // wx.updateAppMessageShareData({
              //   title: param.title, // 分享题目
              //   desc: param.desc, // 分享形貌
              //   link: param.link, // 分享链接，该链接域名或途径必需与当前页面对应的民众号JS平安域名一致
              //   imgUrl: param.imgUrl, // 分享图标
              //   success: function(res) {
              //     // 设置胜利
              //     that.$Message.message("设置胜利!");
              //     that.toRouter();
              //   }
              // });
              // });
              wx.error(function(res) {
                console.log("考证失利返回的信息:", res);
              });
          } else {
            console.log(res.data.message);
          }
        })
        .catch(err => {
          this.$Message.message(error);
        });
    },

总结

这里碰到比较坑的就是，在挪用分享事宜的时刻，不能同时写四个分享按钮事宜，假如都写上，会形成在安卓机上还没有点击分享按钮的时刻，就已走分享胜利success回调函数了，这里说下为啥写四个分享按钮事宜，由于发明假如不写上行将废掉的两个onMenuShareTimeline、onMenuShareAppMessage会在安卓机上碰到不能分享的题目，所以把新增的两个分享按钮事宜updateAppMessageShareData、updateTimelineShareData解释掉，就都能够分享了，iOS和安卓均没题目。

我发明实在碰到这类缘由有多是新旧两个分享事宜的实行递次的题目，也就是在挪用新增的分享按钮的时刻，得先在wx.ready实行，而行将烧毁的接口是不须要的。