微信小程序 - - - - - 转发分享（发送给好友、分享到朋友圈）

原创已于 2022-10-20 10:49:37 修改 · 6.5k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

于 2022-10-19 18:28:05 首次发布

微信小程序专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何在小程序中实现分享到好友和朋友圈的功能，包括`onShareAppMessage`和`onShareTimeline`的使用，以及在分享到朋友圈后遇到的‘单页模式’限制问题。解决方案是调整接口请求为无需登录态的方式，确保在单页模式下正常展示数据。

转发分享

1. 发送给好友
2. 分享到朋友圈
3. 遇到的问题
- 3.1 分享到朋友圈后无法正常展示数据？

1. 发送给好友

1.1 效果图：

在这里插入图片描述

1.2 实现步骤：

监听用户点击右上角菜单的「转发」按钮时触发的事件
设置转发的参数

官方文档：onShareAppMessage
在这里插入图片描述

1.3 实现代码:

****.js

  // 监听用户点击右上角菜单的「转发」按钮时触发的事件
  onShareAppMessage() {
    // 设置转发的参数
    return {
      title: '这里是分享的标题',
      path: '/pages/index/index',
      imageUrl: 'https://img.chinasongzhuang.cn/uploadimg/image/20200219/20200219180104_83804.jpg'
    }
  },

2. 分享到朋友圈

2.1 效果图:

在这里插入图片描述

2.2 实现步骤

分享到朋友圈不支持自定义页面路径！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

监听用户点击右上角菜单的「转发」按钮时触发的事件
设置转发的参数
在***.json 里配置当前页面标题"navigationBarTitleText": "我是页面标题"

官方文档：onShareTimeline
在这里插入图片描述

2.3 实现代码：

****.js

  // 监听用户点击右上角菜单的「转发」按钮时触发的事件
  onShareTimeline() {
    // 设置转发的参数
    return {
      title: '我是朋友圈看到的描述文案',
      query: 'from=pyq'
    }
  },

3. 遇到的问题

3.1 分享到朋友圈后无法正常展示数据？

我们分享到朋友圈的小程序页面，用户打开时会进入一个“单页模式”。 “单页模式”下，一些组件或接口存在一定限制

“单页模式”下，页面顶部固定有导航栏，标题显示为分享时的标题。底部固定有操作栏，点击操作栏的“前往小程序”可打开小程序的当前页面。顶部导航栏与底部操作栏均不支持自定义样式

解决办法：
在单页模式下，将所有接口请求方法改写为无需登录态的请求方式

参考文献：一文看懂：小程序分享到朋友圈