微信小程序的转发与分享功能

一、转发类API

转发类API包括wx.updateShareMenu(Object object)、wx.showShareMenu、wx.hideShareMenu、wx.getShareInfo。

1、wx.updateShareMenu(Object object)

用于更新转发属性,它的参数object有以下属性。

 wx.updateShareMenu({withShareTicket:true,

templateInfo:{},success(){})

关于上表中有些不懂的名词定义我做了以下解释:

  • withShareTicket(是否使用带shareTicket的转发详情):                                             shareTicket它是微信提供的一个临时票据,主要用于获取微信群的唯一标识openGId,从而实现群相关的社交功能,如群接龙、群排行、群任务。
  • isUpdatableMessage是否是动态消息:   动态消息指转发的卡片实时更新如显示任务进度、倒计时、实时结果。
  • templateInfo动态消息的模板信息:它是一组预定义的字段,开发者只能更新这些字段的值,如文本、数字、状态,而无法随意修改卡片布局或图片

2、wx.showShareMenu(Object object)和wx.hideShareMenu(Object object)

某些页面(如支付页、个人中心)禁止用户转发,所以需要使用wx.hideShareMenu(Object object)隐藏页面右上角的转发按钮。

 

3、wx.getShareInfo(Object object)

 用于获取转发的详细信息,它的参数object如下表所示。

二、转发类API应用范例

在微信小程序中,wx.updateShareMenu、wx.showShareMenu、wx.hideShareMenu和 wx.getShareInfo是用于控制转发菜单和处理转发信息的API。它们与传统的分享功能(如 onShareAppMessage 和 onShareTimeline)结合使用,可以实现灵活的转发和分享逻辑。

 

**示例**:

(1) 显示当前页面的转发按钮wx.showShareMenu({

  withShareTicket: true, // 是否使用带 shareTicket 的转发(可用于获取群信息)

  menus: ['shareAppMessage', 'shareTimeline'] // 指定显示的转发类型(聊天或者群聊/朋友圈)

})

(2)隐藏转发按钮

wx.hideShareMenu()

(3) wx.updateShareMenu(Object object)

结合 onShareTimeline实现朋友圈自定义分享。  

wx.updateShareMenu({

  withShareTicket: true, // 是否携带 shareTicket(可用于获取群信息)

  isPrivateMessage: false, // 是否私密消息(默认 false)

  activityId: 'xxx', // 可选,活动ID(特定场景使用)

  menus: ['shareAppMessage', 'shareTimeline'] // 指定可用的转发类型

});

(4) wx.getShareInfo(Object object)

用户转发到微信群后,通过传入的参数shareTicket获取该群的 openGId,实现群排行、群任务等社交功能。  

wx.getShareInfo({

  shareTicket: 'xxxxxx', // 从 onShareAppMessage 返回的 shareTicket

  success(res) {

    console.log('加密数据:', res.encryptedData);

    console.log('IV:', res.iv);//加密算法的初始向量

    // 需后端解密获取 openGId

  }

});

三、如何实现转发和分享功能?

完整流程:

  1. 控制转发菜单(wx.showShareMenu / wx.hideShareMenu / wx.updateShareMenu)  
  2. 定义转发内容(onShareAppMessage/ onShareTimeline)  
  3. 处理转发结果(wx.getShareInfo获取群信息)  

3.1基础转发(到聊天)

Page({

  onLoad() {

    // 显示转发按钮(默认显示,可省略)

    wx.showShareMenu();

  },

 

  // 定义转发内容(用户点击右上角转发时触发)

  onShareAppMessage() {

    return {

      title: '自定义标题', // 转发卡片标题

      path: '/pages/index?id=123', // 跳转路径(可带参数)

      imageUrl: '/images/share.jpg' // 自定义图片(可选)

    };

  }

});

3.2 朋友圈分享

Page({

  onLoad() {

    // 必须调用 updateShareMenu 开启朋友圈分享

    wx.updateShareMenu({

      menus: ['shareAppMessage', 'shareTimeline']

    });

  },

 

  // 定义朋友圈分享内容

  onShareTimeline() {

    return {

      title: '朋友圈标题', // 仅朋友圈生效

      query: 'id=123', // 跳转参数(不同于 path)

      imageUrl: '/images/timeline.jpg' // 朋友圈封面图

    };

  }

});

3.3获取群信息(getShareInfo)

Page({

  onShareAppMessage() {

    return {

      title: '分享到群聊',

      path: '/pages/index?id=123',

      // 必须开启 withShareTicket 才能获取 shareTicket

      success(res) {

        const shareTicket = res.shareTickets[0]; // 获取 shareTicket

        wx.getShareInfo({

          shareTicket,

          success(res) {

            console.log('加密数据:', res.encryptedData);

            // 需后端解密获取 openGId(微信群的唯一标识)

          }

        });

      }

    };

  }

});

注:

  • onShareAppMessage和onShareTimeline是微信小程序原生提供的生命周期方法,专门用来自定义转发行为。
  • onShareAppMessage(){return{title:"",path:"",imageUrl:"/images/share.jpg"}}用于定义转发内容,它可以设置转发到聊天时的标题、用户点击后跳转的路径、图片。
  • onShareTimeline(){return{title:"",query:"",imageUrl:""}}用于定义朋友圈内容,它可以设置分享到朋友圈的标题、跳转参数、图片。

3.4 完整示例

Page({

  onLoad() {

    // 1. 显示转发菜单,并开启朋友圈分享

    wx.showShareMenu({

      withShareTicket: true,

      menus: ['shareAppMessage', 'shareTimeline']

    });

  },

 

  // 2. 定义转发到聊天内容

  onShareAppMessage() {

    return {

      title: '分享给好友',

      path: '/pages/index?id=123',

      imageUrl: '/images/share.jpg',

      success(res) {

        if (res.shareTickets) {

          // 3. 获取群信息(需后端解密)

          wx.getShareInfo({

            shareTicket: res.shareTickets[0],

            success(res) {

              console.log('加密数据:', res.encryptedData);

            }

          });

        }

      }

    };

  },

 

  // 4. 定义朋友圈分享内容

  onShareTimeline() {

    return {

      title: '分享到朋友圈',

      query: 'id=123',

      imageUrl: '/images/timeline.jpg'

    };

  }

});

3.5注意事项

①朋友圈分享需手动开启:

默认关闭,必须调用 `wx.updateShareMenu({ menus: ['shareTimeline'] })` 开启。  

②shareTicket需后端解密:

wx.getShareInfo返回的是加密数据,需结合 session_key解密获取openGId  

③所有分享必须用户触发:

不能自动弹出分享框,必须由用户点击按钮或菜单触发。  

四、总结

  1. 转发类API(showShareMenu/ hideShareMenu/ updateShareMenu/ getShareInfo)用于控制转发菜单的显示和权限。  
  2. 分享功能(onShareAppMessage/ onShareTimeline)用于 定义转发内容。  
  3. 两者结合,可实现 动态控制转发、朋友圈分享、获取群信息等高级功能。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值