金狮镖局 Design By www.egabc.com

需求

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

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

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

标签:
微信网页分享

金狮镖局 Design By www.egabc.com
金狮镖局 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
金狮镖局 Design By www.egabc.com

评论“记录一次开发微信网页分享的步骤”

暂无记录一次开发微信网页分享的步骤的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。