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

 更新时间:2019年05月07日 08:29:45   作者:小白  
这篇文章主要介绍了记录一次开发微信网页分享的步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

需求

最近在做一个项目需求,分享领好书活动,获取用户的个人信息以及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简单编程实例学习

    JavaScript简单编程实例学习

    在本篇文章里小编给大家整理的是关于JavaScript简单编程实例学习内容,有兴趣的朋友们可以参考下。
    2020-02-02
  • kindeditor修复会替换script内容的问题

    kindeditor修复会替换script内容的问题

    这里给大家分享的是个人修改的kindeditor的代码,主要是修复了一些BUG,添加了些常用功能,推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • Bootstrap Table中的多选框删除功能

    Bootstrap Table中的多选框删除功能

    这篇文章主要介绍了Bootstrap Table中的多选框删除功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • LayUI树形表格treetable使用及说明

    LayUI树形表格treetable使用及说明

    这篇文章主要介绍了LayUI树形表格treetable使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • uniapp如何使用 web-view 与网页互相通信

    uniapp如何使用 web-view 与网页互相通信

    这篇文章主要介绍了uniapp如何使用 web-view 与网页互相通信,在APP中使用 this.$scope.$getAppWebview() 获取webview对象实例,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • JS判断数组那点事

    JS判断数组那点事

    在面试过程中经常被面试官问到这样的题目:如何判断数组?下面小编就针对这个问题给大家收集整理了份资料,感兴趣的朋友一起看看吧
    2017-10-10
  • jqgrid 表格数据导出实例

    jqgrid 表格数据导出实例

    jqgrid并没有自带导出表格数据的方法,这里就自己实现了一个,尝试过在页面直接将数据导出,发现只有IE下可以通过调用saveas来实现,但是别的浏览器不支持,于是考虑将数据传回后台,然后后台返回下载文件来实现
    2013-11-11
  • JavaScript设计模式之命令模式实例分析

    JavaScript设计模式之命令模式实例分析

    这篇文章主要介绍了JavaScript设计模式之命令模式,结合实例形式分析了javascript命令模式的概念、原理、用法及相关注意事项,需要的朋友可以参考下
    2019-01-01
  • 自己写的Javascript计算时间差函数

    自己写的Javascript计算时间差函数

    Javascript计算时间差函数,获得时间差,时间格式为 年-月-日 小时:分钟:秒 或者 年/月/日 小时:分钟:秒。
    2013-10-10
  • typescript编写微信小程序创建项目的方法

    typescript编写微信小程序创建项目的方法

    这篇文章主要介绍了typescript编写微信小程序创建项目的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01

最新评论