小程序分享功能记录

分享前置工作：

在正式上线的时候，小程序需要进行微信认证，否则分享功能会报分享功能被禁止的错误。

微信小程序：

分享：

 onShareAppMessage(Object object)

监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。

注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

Page({
  onShareAppMessage() {
    //自己写的逻辑 Start
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定义转发标题'
        })
      }, 2000)
    })
    //自己写的逻辑 End
    return {
      title: '这是一个标题',//转发标题
      path: '/page/user?id=123',//转发路径
      imageUrl: 'https://...png',//使用默认截图
      promise //可不设置，详细作用见官方文档
    }
  }
})

分享至朋友圈：

onShareTimeline()

监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。

注意：只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮

本接口为 Beta 版本，暂只在 Android 平台支持

Page({
  onShareTimeline() {
    return {
      title: '这是一个标题',//自定义标题，即朋友圈列表页上显示的标题
      query: `name=${name}&age=${age}`,//当前页面路径携带的参数
      imageUrl: 'https://...png',//自定义图片路径
    }
  }
})

是否显示当前页面的转发按钮

wx.showShareMenu(Object object)

注意事项

• "shareAppMessage"表示“发送给朋友”按钮，"shareTimeline"表示“分享到朋友圈”按钮

• 显示“分享到朋友圈”按钮时必须同时显示“发送给朋友”按钮，显示“发送给朋友”按钮时则允许不显示“分享到朋友圈”按钮

本接口为 Beta 版本，暂只在 Android 平台支持

wx.showShareMenu({
  withShareTicket: true,//是否使用带 shareTicket 的转发详情
  menus: ['shareAppMessage', 'shareTimeline']//需要显示的转发按钮名称列表
})

微信小程序分享官方文档

uniapp

微信分享

uni.share({
	provider: "weixin",//分享服务提供商,过 uni.getProvider 获取可用的分享服务商
	scene: "WXSceneSession",//场景，可分享至微信，朋友圈，微信收藏
	type: 0,//分享形式，如图文、纯文字、纯图片、音乐、视频、小程序等。默认图文 0
	href: "http://uniapp.dcloud.io/",//跳转链接
	title: "uni-app分享",//分享内容的标题
	summary: "赶紧跟我一起来体验小程序的分享吧！",//分享内容的摘要
	imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",//图片地址
	success: function (res) {
		console.log("success:" + JSON.stringify(res));
	},
	fail: function (err) {
		console.log("fail:" + JSON.stringify(err));
	}
});

scene 值说明

值	说明
WXSceneSession	分享到聊天界面
WXSceneTimeline	分享到朋友圈
WXSceneFavorite	分享到微信收藏

type 值说明

值	说明	provider 支持度
0	图文	weixin、sinaweibo
1	纯文字	weixin、qq
2	纯图片	weixin、qq
3	音乐	weixin、qq
4	视频	weixin、sinaweibo
5	小程序	weixin

QQ分享

uni.share({
    provider: 'qq',
	summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
	success: function (res) {
		console.log("success:" + JSON.stringify(res));
	},
	fail: function (err) {
		console.log("fail:" + JSON.stringify(err));
	}
});

uniapp分享官方文档

拓展

小程序分享功能各端的差异？

小程序分享功能在不同平台（如微信、头条、小红书等）的实现方式和限制存在显著差异，主要体现在分享入口、支持场景、参数传递及兼容性等方面。以下是各端的主要差异总结：

一、分享入口与支持场景

1. 微信小程序

   • 好友/群分享：通过右上角胶囊按钮或自定义按钮触发，需在页面定义 onShareAppMessage 返回标题、路径和图片。支持自定义 path 携带参数，例如 /page/user?id=123，便于追踪分享来源。

   • 朋友圈分享：微信官方未提供直接接口，需通过生成含小程序码的图片，用户手动保存并转发朋友圈，即“三步跳”方案（画图→保存→分享）。

   • 特殊限制：朋友圈分享的 path 不可自定义，默认跳转当前页面，且需通过 query 传递参数。

2. 头条/抖音小程序

   • 支持类似微信的 onShareAppMessage，但可能扩展更多社交场景，例如短视频内嵌分享入口，但具体实现需参考平台文档。

3. 小红书小程序

   • 分享功能存在兼容性问题，例如在内嵌 webview 页面中，若通过 window.history.replaceState 切换页面，分享时获取的 webviewUrl 可能为旧页面 URL，需改用路由跳转（如 router.replace）解决。

---

二、API 与参数处理差异

1. API 支持

   • 微信：通过 wx.showShareMenu 启用分享功能，参数包括 shareAppMessage（好友）和 shareTimeline（朋友圈）。

   • 其他平台：如小红书未完全支持 webviewUrl 参数动态更新，需依赖特定跳转方式确保参数正确。

2. 参数传递

   • 微信好友分享可通过 path 动态传参，而朋友圈分享仅支持 query 参数6。

   • 数据追踪时，微信通过生成带 scene 参数的小程序码标识分享来源，其他平台可能采用类似机制。

---

三、自定义能力与兼容性问题

1. 自定义分享内容

   • 图片生成：微信需通过 canvas 动态绘制分享图并保存本地，若异步处理不当可能导致首次分享失败。

   • 标题与图片：各平台均支持自定义标题和图片，但微信默认使用页面截图，需显式设置 imageUrl 覆盖。

2. 生命周期与全局注入

   • 微信需在每个页面单独定义 onShareAppMessage，但可通过 mixin 全局注入简化代码（如 uview 库）。

   • 头条/小红书等平台可能对页面生命周期事件的支持不同，需针对性适配。

3. Webview 层级问题

   • 微信中 webview 页面需使用 cover-view 覆盖原生组件，否则底部分享按钮可能被遮挡，此问题在真机调试时更显著。

---

四、平台限制与运营策略

1. 分享范围限制

   • 微信禁止直接分享小程序至朋友圈，但允许图文链接间接引导用户扫码。

   • 其他平台（如头条）可能对分享场景更开放，支持直接分享至更多社交渠道。

2. 数据安全与权益

   • 独立部署的小程序可自主管理数据与分享逻辑，而共享型小程序受限于 SaaS 平台，功能扩展性较低。

微信小程序的分享功能最成熟但限制较多（如朋友圈间接分享），其他平台在兼容性和参数处理上可能存在“坑点”（如小红书 webviewUrl 问题）。开发时需针对目标平台调整异步逻辑、参数传递方式及自定义内容生成策略，并结合数据追踪需求设计分享路径。