codecamp

微信小程序API 转发 (Page.onShareAppMessage)

onShareAppMessage(options)


在 Page 中定义 onShareAppMessage 函数,设置该页面的转发信息。

  • 只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
  • 用户点击转发按钮的时候会调用
  • 此事件需要 return 一个 Object,用于自定义转发内容

options 参数说明

参数类型说明最低版本
fromString转发事件来源。button:页面内转发按钮;menu:右上角转发菜单1.2.4
targetObject如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined1.2.4
自定义转发字段

字段说明默认值最低版本
title转发标题当前小程序名称 
path转发路径当前页面 path ,必须是以 / 开头的完整路径 
success转发成功的回调函数 1.1.0
fail转发失败的回调函数 1.1.0
complete转发结束的回调函数(转发成功、失败都会执行 1.1.0

回调结果:

回调类型errMsg说明
successshareAppMessage:ok转发成功
failshareAppMessage:fail cancel用户取消转发
failshareAppMessage:fail (detail message)转发失败,其中 detail message 为详细失败信息

success回调参数说明:

参数类型说明最低版本
shareTicketsStringArrayshareTicket 数组,每一项是一个 shareTicket ,对应一个转发对象1.1.0

示例代码:

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      success: function(res) {
        // 转发成功
      },
      fail: function(res) {
        // 转发失败
      }
    }
  }
})

wx.showShareMenu(OBJECT)

基础库版本 1.1.0 开始支持,低版本需做兼容处理

显示当前页面的转发按钮

OBJECT参数说明:

参数类型必填说明
withShareTicketBoolean是否使用带 shareTicket 的转发详情
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

wx.showShareMenu({
  withShareTicket: true
})

wx.hideShareMenu(OBJECT)

基础库版本 1.1.0 开始支持,低版本需做兼容处理

隐藏转发按钮

OBJECT参数说明:

参数类型必填说明
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

wx.hideShareMenu()

wx.updateShareMenu(OBJECT)

基础库 1.2.0 开始支持,低版本需做兼容处理

更新转发属性

OBJECT参数说明:

参数类型必填说明
withShareTicketBoolean是否使用带 shareTicket 的转发详情
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

wx.updateShareMenu({
  withShareTicket: true,
  success() {
  }
})

wx.getShareInfo(OBJECT)

基础库 1.1.0 开始支持,低版本需做兼容处理

获取转发详细信息

OBJECT参数说明:

参数类型必填说明
shareTicketStringshareTicket
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

CALLBACK 参数说明:

参数类型说明
errMsgString错误信息
encryptedDataString包括敏感数据在内的完整转发信息的加密数据,详细见加密数据解密算法
ivString加密算法的初始向量,详细见加密数据解密算法

encryptedData 解密后为一个 JSON 结构,包含字段如下:

字段说明
openGId群对当前小程序的唯一 ID

Tip: 如需要展示群名称,可以使用开放数据组件

获取更多转发信息

通常开发者希望转发出去的小程序被二次打开的时候能够获取到一些信息,例如群的标识。现在通过调用 wx.showShareMenu 并且设置 withShareTicket 为 true ,当用户将小程序转发到任一群聊之后,可以获取到此次转发的 shareTicket,此转发卡片在群聊中被其他用户打开时,可以在 App.onLaunch() 或 App.onShow 获取到另一个 shareTicket。这两步获取到的 shareTicket 均可通过 wx.getShareInfo() 接口可以获取到相同的转发信息。

页面内发起转发

基础库 1.2.0 开始支持,低版本需做兼容处理

通过给 button 组件设置属性 open-type="share",可以在用户点击按钮后触发 Page.onShareAppMessage() 事件,如果当前页面没有定义此事件,则点击后无效果。相关组件:button

使用指引

转发按钮,旨在帮助用户更流畅地与好友分享内容和服务。转发,应是用户自发的行为,且在需要时触手可及。开发者在使用时若遵从以下指引,会得到更佳的用户体验。

  1. 含义清晰:明确、一目了然的图形按钮,将为用户减少理解的时间。在我们的资源下载中心,你可以找到这样的按钮素材并直接使用。或者你可以根据自己业务的设计风格,灵活设计含义清晰的按钮的样式。当然,你也可以直接使用带文案的按钮,“转发给好友”,它也足够明确。
  2. 方便点击:按钮点击热区不宜过小,亦不宜过大。同时,转发按钮与其他按钮一样,热区也不宜过密,以免用户误操作。
  3. 按需出现:并非所有页面都适合放置转发按钮,涉及用户隐私的非公开内容,或可能打断用户完成当前操作体验的场景,该功能并不推荐使用。同时,由于转发过程中,我们将截取用户屏幕图像作为配图,因此,需要注意帮助用户屏蔽个人信息。
  4. 尊重意愿:理所当然,并非所有的用户,都喜欢与朋友分享你的小程序。因此,它不应该成为一个诱导或强制行为,如转发后才能解锁某项功能等。请注意,这类做法不仅不被推荐,还可能违反我们的《运营规范》,我们强烈建议你在使用前阅读这部分内容。

以上,我们陈列了最重要的几点,如果你有时间,可以完整浏览《设计指南》,相信会有更多的收获。

Bug & Tip

  1. tip: 转发图片不能自定义;会取当前页面,从顶部开始,高度为 80% 屏幕宽度的图像作为转发图片。
  2. tip: 转发的调试支持请查看 普通转发的调试支持 和 带 shareTicket 的转发
  3. tip: 只有转发到群聊中打开才可以获取到 shareTickets 返回值,单聊没有 shareTickets
  4. tipshareTicket 仅在当前小程序生命周期内有效
  5. tip: 由于策略变动,小程序群相关能力进行调整,开发者可先使用wx.getShareInfo接口中的群ID进行功能开发。




微信小程序API 接入指引
微信小程序API 获取小程序页面二维码
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

微信小程序 指南

目录结构

开放能力

微信小程序 调试

微信小程序 实时日志

微信小程序 小程序测速

微信小程序 基础组件

微信小程序 API

媒体

界面

微信小程序API 绘图

微信小程序 服务端

接口调用凭证

统一服务消息

微信小程序 服务市场

微信小程序 生物认证

微信小程序 云开发

服务端

微信小程序云开发服务端API 数据库

SDK文档

微信小程序 扩展能力

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }