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


Posted in Javascript onMay 07, 2019

需求

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

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

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

Javascript 相关文章推荐
载入进度条 效果
Jul 08 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
JavaScript中的 new 命令
May 22 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
原生JS实现记忆翻牌游戏
Jul 31 Javascript
Vue 幸运大转盘实现思路详解
May 06 #Javascript
Vue运用transition实现过渡动画
May 06 #Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 #Javascript
vue路由跳转传参数的方法
May 06 #Javascript
如何获取vue单文件自身源码路径
May 06 #Javascript
详解vue-cli中使用rem,vue自适应
May 06 #Javascript
用Vue编写抽象组件的方法
May 06 #Javascript
You might like
php.ini 中文版
2006/10/28 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
javascript的BOM汇总
2015/07/16 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
详解python 注释、变量、类型
2018/08/10 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
python字典排序的方法
2019/10/12 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
试用期员工考核制度
2014/01/22 职场文书
美术毕业生求职信
2014/02/25 职场文书
美术指导助理求职信
2014/04/20 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
工作证明英文模板
2014/10/21 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
工作会议简报
2015/07/20 职场文书