微信JS-SDK分享接口配置与使用详解

作者:接口漫谈

时间:2026-10-30

浏览:647

本文详解微信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程序设计工作有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章