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

需求

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • java调用微信接口实现网页分享小功能

    本文实例为大家分享了java调用微信接口实现网页分享小功能的具体代码,供大家参考,具体内容如下 // 获取access_token  *注意* 经过实际开发测试,微信分享不支持跨域请求,因此获取access_token的请求必须从服务器发起,否则无法获取到access_token所以以下都是服务端操作 微信接口说明参考地址 参考文章:Java微信分享接口开发详解 一.微信util类 public class ShareConstants { //微信获取ticket的接口 public stat

  • Android实现微信分享带有缩略图的网页

    前言 最近做了一个web app 需要做微信分享. 需求是分享web页还要带有图片,并且图片还不是本地的,这就有点坑了, 也就是说图片还要从网络实时获取并且是同步的,如果是异步的还需要等待(用户体验就不好了) 代码如下 /** * 微信分享 好友 */ public void wxHyShare(String shareUrl, String title, String image, String desc) { IWXAPI api = WXAPIFactory.createWXAPI(con

  • VueJs单页应用实现微信网页授权及微信分享功能示例

    在实际开发中,无论是做PC端.WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算完成了,但开发过程中遇到好几个坑.废话不多说了,开始正题. 描述点 微信相关开发知识了解 怎么样实现微信相关功能本地测试 微信网页授权 微信分享 微信相关开发知识了解 微信公众号的appId,AppSecret 当我们注册一个微信公众号后,便能够得到一个appId(每个微信公众号只有一个,一个微信公

  • 记录一次开发微信网页分享的步骤

    需求 最近在做一个项目需求,分享领好书活动,获取用户的个人信息以及unionID,并诱导用户分享给好友或朋友圈,达到裂变拉新的目的.在做的过程中遇到了一些坑的地方,所以回过来总结一下 技术方案 使用微信JS-SDK自定义分享到好友和分享到朋友圈 实现步骤 1.要实现微信H5网页自定义分享功能,必须先熟悉下微信公众平台开发文档,具体文档里面说的很详细,这里说下需要注意的点,别忘了绑定开发者权限,还有绑定js安全域名,要不然有可能会报redirect_uri参数错误. 2.首先一般在做微信H5网页活

  • 基于JS开发微信网页录音功能的实例代码

    具体代码如下所示: wx.ready(function () { var startRecordflag = false var startTime = null //btnRecord 为录音按钮dom对象 btnRecord.addEventListener('touchstart', function (event) { event.preventDefault(); startTime = newDate().getTime(); // 延时后录音,避免误操作 recordTimer =

  • 记录Yii2框架开发微信公众号遇到的问题及解决方法

    微信公众号开发,提示"该公众号暂时无法提供服务,请稍后再试",如何解决? 以前使用Yii框架的时候,并没有像Yii2,以前的Yii框架似乎用起来在安全方面不如Yii2,后面在用Yii2的时候发现了一个有趣的事情. 以前在用Yii框架做微信方面的开发的时候,开发模式需要添加对应的接口. 这里一定要注意点的点是在做接口验证的时候是使用GET请求,这个毫无疑问没有任何问题,但是在验证完之后,进行接口上面的交互的时候就有问题了,使用的POST的请求. 如果是以前的Yii的话,如果没有做严格的p

  • 使用Typescript开发微信小程序的步骤详解

    Typescript的优势咱不需要赘述太多,有兴趣可以参考(https://www.typescriptlang.org/).今天给大家分享一下如何在微信小程序(或者其他同类小程序)开发中使用Typescript. 这个分两种情况,最简单的做法就是在创建项目时,选择Typescript这个选项,如下图所示.但要注意,这个选项只有在选择"Use no cloud service"才有,而另外一种Mini Program Cloud Base则不支持.这个可能是开发工具还没有跟上吧,希望以

  • 微信公众号网页分享功能开发的示例代码

    现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接: 上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的视觉效果. 微信JS-SDK Demo :这个是微信网页分享出去的标题. 微信JS-SDK,帮助第三方为用户提供更优质的移动web服务:这个是被分享的这个页面的分享描述. 微信图标:这个就是自己网站或者自己自定义的图像. 上面这个是微信官方网页分享出去的定义描述,那么怎样实现自己网站网页的自定义分享

  • 微信开发之网页授权获取用户信息(二)

    在公众号的配置过程中,许多开发者会在菜单中加入HTML5页面,有时在页面内需要访问页面的用户信息,此时就需要网页授权获取用户基本信息 我们提醒大家:本文介绍讲述的内容是基于yii2.0框架 1.设置授权回调域名:开发 ---> 接口权限 找到"网页授权获取用户基本信息",点击后面对应的"修改",在弹框响应位置填写授权回调域名即可,此处的域名不需要加http:// (关于网页授权回调域名的说明详情可参考公众平台开发者文档) 2.获取授权 关于OAuth2.0博主

  • 记录vue做微信自定义分享的一些问题

    前言 众所周知,在使用vue做项目的时候,微信自定义分享一直是一个坑,只是ios上坑明显的多. 然后每次遇到问题都要度娘很久. 奇怪的是貌似和很多人遇到的问题一样,但是他们写的解决方案都没办法直接解决我遇到的问题. 这里就记录一下遇到过的一些坑,和解决方式. 目前项目里面,安卓和ios上面的自定义分享已经没有什么问题了. 问题及解决方式 hash模式 在微信的官方文档中,提到关于jsapi_ticket的签名算法中,生成签名的时候,当前网页的URL,不包含#及其后面的部分:而且自定义分享出去的链

  • 微信公众平台开发教程②微信端分享功能图文详解

    本文实例讲述了微信公众平台微信端分享功能.分享给大家供大家参考,具体如下: 背景 初次尝试微信公众号的开发,对于学习方法的探索都是来源于网上的博客.问答,对于参差不齐的信息,自己也是有苦说不出,抽出一点时间写点文章,既是对自己的学习总结,也希望给予同是菜鸟的小白一点帮助. 今天想添加微信分享的功能,如果不进行自定义设计,那么当我们点击分享朋友圈.好友或者QQ好友.空间时,默认的标题就是<title>标签中的信息,而显示的描述信息就是链接,图片多是默认为页面中显示的第一张图片,显然这样的处理是不

随机推荐