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

super.x

发布于 2019-07-02 14:25:04

1.5K0

发布于 2019-07-02 14:25:04

文章被收录于专栏：考拉阅读前端团队考拉阅读前端团队

需求

最近在做一个项目需求，分享领好书活动，获取用户的个人信息以及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.kk.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.kk = _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执行，而即将废弃的接口是不需要的。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

微信