专栏首页考拉阅读前端团队记录一次开发微信网页分享

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

需求

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 互联网“寒冬”不想被辞退,Android程序员该如何应对?

    最近,在气候转凉的同时,互联网领域也是寒气逼人,许多人担心互联网寒冬的到来。其实,寒冬来了又怎样?关键在于你怎么看待互联网寒冬。

    Android架构
  • 思维导图魔改版,锻炼发散性思维

    它可以帮助我们系统的梳理知识,还可以帮助我们发散创意,帮助我们在某一个创意下深挖、垂直思考。将我们头脑中的创意变成可被执行的创造力。

    IT小侠公社
  • 手机变win10电脑,她又夸我了

    最近有个小伙伴留言问:“安卓系统可不可以变(shua)Windows系统的?”。

    IT小侠公社
  • Lottie动画简介

    照着GIF图/效果视频去模仿,猜测动画时长,手动创建贝塞尔曲线……反复调整参数,一遍遍目测效果,最后发现:

    ayqy贾杰
  • 最全的微信QQ特效昵称都在这啦!帮你打包好了

    复制完成之后,打开【微信】-【我】-【名字】,将括号复制粘贴进去,将括号删除,点击保存就OK了。

    IT小侠公社
  • Android为每个应用分配多少内存?如何进行性能调优

    可以看到,设置largeHeap为true时, 通过rt.maxMemory();获取的值为512M。

    Android架构
  • 互联网移动端即将进入“暗黑时代”

    2019-5-7 Google I/O 2019 Android Q发布 - 推出暗色模式

    用户5521279
  • 开发者神器 Ubuntu Make 15.11.1 发布

    Ubuntu Make 原名 Ubuntu Developer Tools Center,是一款开源的命令行工具软件,用户可在主要 Linux 平台上轻易的进行...

    飞奔去旅行
  • React 16.6新API

    其中最重要的是Suspense特性,在之前的React Async Rendering中提到过:

    ayqy贾杰
  • 新版微信QQ半透明主题,这才是我喜欢的

    这几天科技圈还是挺多大事的,“微信之夜”,柚子看了一下,“微信之父”张小龙讲述了微信8年发展中的心路历程,对用户关心的问题进行了解答。

    IT小侠公社

扫码关注云+社区

领取腾讯云代金券