微信小程序转发

本文详细介绍了微信小程序转发的四个关键方法:onShareAppMessage、showShareMenu、hideShareMenu和getShareInfo。分享流程包括转发前配置、转发时获取群信息、转发到群组后打开以及二次转发。shareTicket作为重要票据,用于获取群信息,实现用户与群组的绑定。通过转发树和转发链的概念,可以分析群组和成员之间的关系。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

微信小程序转发涉及以下4个方法:

1、Page.onShareAppMessage({})
设置右上角“转发”配置,及转发后回调函数返回 shareTicket 票据
2、wx.showSahreMenu()
用户点击右上角后,显示“转发”按钮
3、wx.hideShareMenu()
隐藏转发按钮,无视 Page.onShareAppMessage({})
4、wx.getShareInfo({})
根据 shareTicket 获取已加密的群信息

把转发流程切分:转发前配置->转发时->转发到群组后打开->二次转发
转发流程图:

这里写图片描述

U1: 用户
T1,T2,T3:表示转发票据,即 shareTicket
G1,G2,G3:群组

1.转发前配置
在页面 onLoad 方法添加

wx.showShareMenu({
    withShareTicket: true
})

withShareTicket 为 true 时,表示允许转发时是否携带 shareTicket。
shareTicket 是获取转发目标群信息的票据,只有拥有 shareTicket 才能拿到群信息,用户每次转发都会生成对应唯一的shareTicket 。

shareTicket 有两个用途:

  • 用户主动转发后,获取转发到目标群群信息,对应上图UI。
  • 用户在群组中打开小程序,获取群组信息,对应上图 G1 群组中的用户。

2.转发时获取群信息
当某个小程序被转发到群组后,开发者想获取到转发目标群组信息,将用户和群组做某种绑定关系(openId + openGid)。

onShareAppMessage: function () {
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      success: function(res) {
        var shareTickets = res.shareTickets;
        if (shareTickets.length == 0) {
            return false;
        }
        wx.getShareInfo({
            shareTicket: shareTickets[0],
            success: function(res){
                var encryptedData = res.encryptedData;
                var iv = res.iv;
            }
        })
      },
      fail: function(res) {
        // 转发失败
      }
    }
  }

shareTickets 是一个数组,每一项是一个 shareTicket ,对应一个转发对象,转发给用户不会包含shareTicket。

拿到 shareTicket 之后,使用 wx.getShareInfo({}) 方法传入 shareTicket 参数,wx.getShareInfo({}) 里回调函数中包含 已加密的群信息和 向量IV。

3.转发到群组后打开
用户将小程序转发到微信群组后,群成员打开小程序,通过 shareTicket,开发者就能将群成员和群组绑定起来(openId + openGid),基于群组关系,小程序有更多的应用场景,例如:王者荣耀群排行,摩拜单车。

Page({
    onLoad: function(opt) {
        /** 判断场景值,1044 为转发场景,包含shareTicket 参数 */
        if (opt.scene == 1044) {
            wx.getShareInfo({
                shareTicket: opt.shareTicket,
                success: function(res){
                    var encryptedData = res.encryptedData;
                    var iv = res.iv;
                }
            })
        }
    }
})

在群组中打开小程序,页面onLoad 或 onShow 方法包含 scene 和 shareTicket,需要判断 scene 是否为1044,如果不是则不包含 opt 中 shareTicket 参数。

4.二次转发
二次转发重复前3个步骤,没什么可说的,但是有一个方向值得探讨,可否把小程序转发路径比作转发链,进而生成转发树,用数据结构方法(树、马尔科夫链)处理发现群组与群组,群组与成员之间微妙关系。

如开头那张图,我们很容易看出转发链和转发树。
转发链:U1 > G1 > G2
转发树:U1 > G1 > G2 & G3

### Vue3 构建的微信小程序中实现转发功能 在 Vue3 和微信小程序集成开发环境中,要实现在页面中的转发功能,可以遵循特定的小程序 API 调用来完成这一操作。对于微信小程序而言,`onShareAppMessage` 是用于配置当前页面右上角菜单中的转发按钮的行为函数[^1]。 当使用 Vue3 来构建微信小程序时,开发者需注意的是,在组件内部定义 `onShareAppMessage` 方法来指定分享逻辑。下面是一个简单的例子展示如何在一个基于 Vue3 的微信小程序项目里设置转发功能: ```javascript export default { setup() { const onShareAppMessage = () => ({ title: '欢迎体验本应用', path: '/pages/index/main', // 需要跳转到的应用内路径 imageUrl: '' // 可选参数, 自定义分享图标链接 }); return { onShareAppMessage }; } } ``` 此代码片段展示了如何通过返回一个对象给 `onShareAppMessage()` 函数来自定义分享的内容,包括但不限于标题 (`title`)、目标页面路径(`path`)以及可选项图片 URL (`imageUrl`)。值得注意的是,这里的 `setup` 函数是 Vue Composition API 中的一部分,它允许更灵活地管理状态和生命周期钩子[^2]。 为了使上述方法生效,还需要确保该页面已经注册了相应的事件监听器以便响应用户的交互行为。通常情况下,这一步骤是在页面加载完成后自动处理好的;但如果遇到特殊情况,则可能需要手动调用相关接口以激活这些特性。 另外,如果希望根据不同的条件动态改变分享内容,可以在 `onShareAppMessage` 返回的对象中加入额外的逻辑判断语句,从而满足更加复杂的需求场景。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值