JS版微信6.0分享接口用法分析


Posted in Javascript onOctober 13, 2016

本文实例讲述了JS版微信6.0分享接口用法。分享给大家供大家参考,具体如下:

为了净化网络,整顿诱导分享及诱导关注行为,微信于2014年12月30日发布了《微信公众平台关于整顿诱导分享及诱导关注行为的公告》,微信平台开发者发现,原有的微信分享功能不能用了。正在苦于微信分享该怎么解决时,微信于2015年1月10日即时发布了开放JS-SDK,为微信网站的开发提供了强大的js功能。

注:

1.微信JS-SDK,提供的分享接口仅是监听分享事件触发时,修改分享的标题、链接等。不能自定义触发分享事件

2.分享的监听,仅提供了腾讯旗下产品的接口,接口列表:分享到朋友圈、分享给朋友、分享到QQ、分享到QQ空间、分享到腾讯微博;

微信6.0之后,原有的WeixinJSBridge.on('menu:share:timeline', function (argv) {}不再可以使用,但是微信提供的新的方法 JS-SDK, 官方接口请参见 微信JSSDK说明文档

分享接口使用实例:

注:本文介绍的前提是服务器端已经获取的公众平台的access_token和Jsapi_Ticket

一、权限验证配置,注册当前页面使用的分享接口

//注入权限验证配置
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: '@AccessTokenManage.AppID', // 必填,公众号的唯一标识
  timestamp:@timestamp , // 必填,生成签名的时间戳
  nonceStr: '@timestamp', // 必填,生成签名的随机串
  signature: '@Common.SecurityHelper.SHA1(sig)',// 必填,签名,见附录1
  jsApiList: [
    //分享接口列表
    'onMenuShareTimeline',
    'onMenuShareAppMessage',
    'onMenuShareQQ',
    'onMenuShareQZone',
    'onMenuShareWeibo'
  ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

二、在ready事件中,注册监听分享

//处理成功验证
wx.ready(function () {
  // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,
  //config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。
  //对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
  //监听,分享到朋友圈
  wx.onMenuShareTimeline({
    title:'标题测试',
    link:'https://3water.com',
    imgUrl:'https://3water.com/favicon.ico',
    success:function(){
      appendText('分享成功');
    },
    calcel:function(){
      appendText('已经取消');
    }
  });
  //监听,分享到QQ空间
  wx.onMenuShareQZone({
    title: '标题测试', // 分享标题
    desc: '描述测试', // 分享描述
    link: 'https://3water.com', // 分享链接
    imgUrl: 'https://3water.com/favicon.ico', // 分享图标
    success: function () {
      // 用户确认分享后执行的回调函数
      appendText('分享QQ空间成功');
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
      appendText('分享QQ控件取消');
    }
  });
  //监听,分享给朋友 (type,dataurl基本可以放弃不使用)
  wx.onMenuShareAppMessage({
    title: '标题测试', // 分享标题
    desc: '描述测试', // 分享描述
    link: 'https://3water.com', // 分享链接
    imgUrl: 'https://3water.com/favicon.ico', // 分享图标
    type: 'link', // 分享类型,music、video或link,不填默认为link
    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    success: function () {
      // 用户确认分享后执行的回调函数
      appendText('分享给朋友成功');
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
      appendText('分享给朋友取消');
    }
  });
  //监听,分享到QQ
  wx.onMenuShareQQ({
    title: '标题测试', // 分享标题
    desc: '描述测试', // 分享描述
    link: 'https://3water.com', // 分享链接
    imgUrl: 'https://3water.com/favicon.ico', // 分享图标
    success: function () {
      // 用户确认分享后执行的回调函数
      appendText('分享到QQ成功');
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
      appendText('分享到QQ取消');
    }
  });
  //监听,分享到腾讯微博 (基本可以放弃不使用)
  wx.onMenuShareWeibo({
    title: '标题测试', // 分享标题
    desc: '描述测试', // 分享描述
    link: 'https://3water.com', // 分享链接
    imgUrl: 'https://3water.com/favicon.ico', // 分享图标
    success: function () {
      // 用户确认分享后执行的回调函数
      appendText('分享到腾讯微博成功');
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
      appendText('分享到腾讯微博失败');
    }
  });
  appendText('ready事件触发');
});

关于常用封装实例可参考前面一篇《微信js-sdk分享功能接口常用逻辑封装示例》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 动态添加事件代码
Nov 30 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 #Javascript
微信小程序 SocketIO 实例讲解
Oct 13 #Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 #Javascript
使用jquery如何获取时间
Oct 13 #Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 #Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 #Javascript
js给table赋值的实例代码
Oct 13 #Javascript
You might like
php构造函数与析构函数
2016/04/23 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
2007/05/30 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
对javascript继承的理解
2016/10/11 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python中的json总结
2018/10/11 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
python属于解释型语言么
2020/06/15 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
高中毕业生自我鉴定
2013/11/03 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
2016新年慰问信范文
2015/03/25 职场文书
矛盾论读书笔记
2015/06/29 职场文书
大学学生会竞选稿
2015/11/19 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
深入浅析Django MTV模式
2021/09/04 Python