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


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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
vue拖拽组件使用方法详解
Dec 01 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
如何选购合适的收音机
2021/03/01 无线电
关于PHP语言构造器介绍
2013/07/08 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
基于jquery的滑动样例代码
2010/11/20 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
详细解密jsonp跨域请求
2015/04/15 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
js实现旋转木马效果
2017/03/17 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Python字符串对象实现原理详解
2019/07/01 Python
python解析yaml文件过程详解
2019/08/30 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
python实现飞船大战
2020/04/24 Python
python实现数字炸弹游戏
2020/07/17 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
python openpyxl模块的使用详解
2021/02/25 Python
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
销售主管岗位职责
2014/02/08 职场文书
物流专员岗位职责
2014/02/17 职场文书
学校周年庆活动方案
2014/08/22 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server