记录一次开发微信网页分享

需求

最近在作一个项目需求，分享领好书活动，获取用户的我的信息以及unionID，并诱导用户分享给好友或朋友圈，达到裂变拉新的目的。在作的过程当中遇到了一些坑的地方，因此回过来总结一下

技术方案

使用微信JS-SDK自定义分享到好友和分享到朋友圈

实现步骤

一、要实现微信H5网页自定义分享功能，必须先熟悉下微信公众平台开发文档，具体文档里面说的很详细，这里说下须要注意的点，别忘了绑定开发者权限，还有绑定js安全域名，要否则有可能会报redirect_uri参数错误。

二、首先通常在作微信H5网页活动，都须要获取用户的我的信息，这就须要用户受权，通常受权有两种方式，一种是静默受权，一种是网页受权，这个在微信开发文档说的很详细。

对于已关注公众号的用户，若是用户从公众号的会话或者自定义菜单进入本公众号的网页受权页，即便是scope为snsapi_userinfo，也是静默受权，用户无感知

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

①引导用户进入受权页面赞成受权，获取code

②经过code换取网页受权access_token（与基础支持中的access_token不一样）

③若是须要，开发者能够刷新网页受权access_token，避免过时

④经过网页受权获取用户基本信息（openid 、UnionID、我的头像、性别、省市、微信昵称等）

三、下面是具体实现代码，说下大概思路，经过判断参数是否在微信浏览器中打开，是否让用户受权，并重定向到微信的接口拿到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);
    }

四、接下来就是如何自定义分享给好友或者朋友圈，一样也是按照调用微信开发文档上说的进行配置和调用。在调用分享接口成功以后开始调用分享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执行，而即将废弃的接口是不须要的。