Skip to content

分享 ​

onShareAppMessage(OBJECT) ​

小程序中用户点击分享后,在 js 中定义 onShareAppMessage 处理函数(和 onLoad 等生命周期函数同级),设置该页面的分享信息。

  • 用户点击分享按钮的时候会调用。这个分享按钮可能是小程序右上角原生菜单自带的分享按钮,也可能是开发者在页面中放置的分享按钮(<button open-type="share">);
  • 此事件需要 return 一个Object,用于自定义分享内容。

微信小程序平台的分享管理比较严格,请参考 小程序分享指引。

平台差异说明

AppH5微信小程序支付宝小程序百度小程序抖音小程序、飞书小程序QQ小程序快手小程序京东小程序
xx√√x√√√√
参数类型说明平台差异说明
fromString分享事件来源:button(页面内分享按钮)、menu(右上角分享按钮)
targetObject如果 from 值是 button,则 target 是触发这次分享事件的 button,否则为 undefined
webViewUrlString页面中包含 <web-view> 组件时,返回当前 <web-view> 的url微信小程序1.6.4+、支付宝小程序、京东小程序

此事件需要 return 一个 Object,用于自定义分享内容,其内容如下:

参数名类型必填说明平台差异说明
titleString是分享标题
pathString是页面 path ,必须是以 / 开头的完整路径。注意:京东小程序,开头不要加'/'QQ小程序不支持
imageUrlString否分享图标,路径可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4
contentString否百度小程序表现为:分享内容;支付宝小程序表现为:吱口令文案百度小程序、支付宝小程序
descString否自定义分享描述支付宝小程序、抖音小程序、京东小程序
bgImgUrlString否自定义分享二维码的背景图,建议大小750*950(网络图片路径)支付宝小程序
queryString否QQ小程序查询字符串,必须是 key1=val1&key2=val2 的格式。从这条转发消息进入后,可通过 qq.getLaunchOptionSync() 或 qq.onShow() 获取启动参数中的 query。QQ小程序
templateIdString否开发者后台设置的分享素材模板 id抖音小程序
mpIdString否微信小程序id,此场景用于分享到微信后,用户点击分享卡片,进入该appid对应的微信小程序,实现引流到微信小程序京东小程序
typeNumber否转发形式(0 - 微信小程序正式版 ;1 - 微信小程序开发版;2 - 微信小程序体验版;京东App9.0.0开始不填或者其他值都会先判断是否有url参数,如果有打开分享后显示url对应页面,否则默认生成京东小程序官方的一个分享中间页面,点击可跳到京东app里面的对应小程序。)京东小程序
mpPathString否微信小程序路径京东小程序
channelString否渠道(不写默认微信朋友,微信朋友圈)京东小程序
urlString否h5链接地址(h5分享填写,不填默认中间页)京东小程序
successFunction否接口调用成功的回调函数支付宝小程序、百度小程序
failFunction否接口调用失败的回调函数支付宝小程序、百度小程序
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)百度小程序

示例代码

javascript
export default {
  onShareAppMessage(res) {
    if (res.from === 'button') {// 来自页面内分享按钮
      console.log(res.target)
    }
    return {
      title: '自定义分享标题',
      path: '/pages/test/test?id=123'
    }
  }
}
export default {
  onShareAppMessage(res) {
    if (res.from === 'button') {// 来自页面内分享按钮
      console.log(res.target)
    }
    return {
      title: '自定义分享标题',
      path: '/pages/test/test?id=123'
    }
  }
}

注意

  • 微信、头条平台:只有定义了此事件处理函数,小程序右上角菜单才会显示“转发”按钮
  • QQ小程序还支持通过qq.offShareAppMessage取消对系统分享按钮的监听。

qin.showShareMenu(OBJECT) ​

小程序的原生菜单中显示分享按钮

平台差异说明

AppH5微信小程序支付宝小程序百度小程序抖音小程序、飞书小程序QQ小程序快手小程序京东小程序
xx√√√√√√√
属性类型必填说明平台差异说明
withShareTicketBoolean否是否使用带 shareTicket 的转发,默认为 flase。详情微信小程序
titleString否分享标题百度小程序
contentString否分享内容百度小程序
imageUrlString否分享图标百度小程序
pathString否页面 path ,必须是以 / 开头的完整路径。百度小程序
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行) 

qin.hideShareMenu(OBJECT) ​

小程序的原生菜单中隐藏分享按钮

平台差异说明

AppH5微信小程序支付宝小程序百度小程序抖音小程序、飞书小程序QQ小程序快手小程序京东小程序
xx√√(1.17.0+)x√√√√
属性类型必填说明平台差异说明
hideShareItemsArray否['qq']控制是否隐藏"转发",['qzone']控制是否隐藏"分享到空间",不带hideShareItems参数默认"转发"、"分享到空间"全隐藏。目前只支持'qq'、'qzone'。QQ小程序
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数(调用成功、失败都会执行)

代码示例

javascript
qin.hideShareMenu()
qin.hideShareMenu()

注意

  • QQ小程序可以单独控制隐藏分享到QQ好友或分享到QQ空间,详见其API文档