微信JS-SDK分享接口配置与使用详解
本文详解微信6.0后JS-SDK分享接口的使用方法。从WeixinJSBridge废弃背景出发,介绍如何通过后端获取access_token和Jsapi_Ticket,完成前端wx.config权限验证配置,并在ready事件中注册onMenuShareTimeline等监听接口,实现自定义分享内容。
微信JS-SDK分享接口背景与概述
本文详细介绍微信6.0版本中JS版分享接口的具体用法,旨在为开发者提供实用的参考方案。
为整治诱导分享及关注行为,微信平台于2014年12月30日发布相关整顿公告,导致原有分享功能受限。随后,微信于2015年1月10日推出JS-SDK,为网站开发提供了必要的JavaScript功能支持。
注意事项:
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://www.jb51.net',
imgUrl:'https://www.jb51.net/favicon.ico',
success:function(){
appendText('分享成功');
},
calcel:function(){
appendText('已经取消');
}
});
//监听,分享到QQ空间
wx.onMenuShareQZone({
title: '标题测试', // 分享标题
desc: '描述测试', // 分享描述
link: 'https://www.jb51.net', // 分享链接
imgUrl: 'https://www.jb51.net/favicon.ico', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
appendText('分享QQ空间成功');
},
cancel: function () {
// 用户取消分享后执行的回调函数
appendText('分享QQ控件取消');
}
});
//监听,分享给朋友 (type,dataurl基本可以放弃不使用)
wx.onMenuShareAppMessage({
title: '标题测试', // 分享标题
desc: '描述测试', // 分享描述
link: 'https://www.jb51.net', // 分享链接
imgUrl: 'https://www.jb51.net/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://www.jb51.net', // 分享链接
imgUrl: 'https://www.jb51.net/favicon.ico', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
appendText('分享到QQ成功');
},
cancel: function () {
// 用户取消分享后执行的回调函数
appendText('分享到QQ取消');
}
});
//监听,分享到腾讯微博 (基本可以放弃不使用)
wx.onMenuShareWeibo({
title: '标题测试', // 分享标题
desc: '描述测试', // 分享描述
link: 'https://www.jb51.net', // 分享链接
imgUrl: 'https://www.jb51.net/favicon.ico', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
appendText('分享到腾讯微博成功');
},
cancel: function () {
// 用户取消分享后执行的回调函数
appendText('分享到腾讯微博失败');
}
});
appendText('ready事件触发');
});
如需了解常用封装逻辑,可参考《微信js-sdk分享功能接口常用逻辑封装示例》一文。
更多JavaScript相关内容,建议查阅本站专题,包括《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望本文所述内容能对大家的JavaScript程序设计工作有所帮助。
全栈开发中JavaScript与Java怎么协作?前后端技术栈配合解析
2026-11-04 11:08:24
Node.js官网访问慢?国内镜像加速下载方案
2026-11-03 18:57:24
Node.js 连接 MySQL 数据库实现增删改查操作
2026-11-03 14:31:14
Windows系统安装Node.js:下载、配置与环境验证
2026-11-03 14:15:56
Linux (Ubuntu/CentOS) 环境下安装Node.js的常用方法
2026-11-03 10:18:39
