uniapp小程序中onShareAppMessage(OBJECT)实现带参数的分享功能
一、引言
小程序中用户点击分享后，在 js 中定义 onShareAppMessage 处理函数（和 onLoad 等生命周期函数同级），设置该页面的分享信息。
- 用户点击分享按钮的时候会调用。这个分享按钮可能是小程序右上角原生菜单自带的分享按钮，也可能是开发者在页面中放置的分享按钮（
<button open-type="share">）； - 此事件需要 return 一个Object，用于自定义分享内容
二、平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 抖音小程序、飞书小程序 | QQ小程序 | 快手小程序 | 京东小程序 |
|---|---|---|---|---|---|---|---|---|
| x | x | √ | √ | x | √ | √ | √ | √ |
| 参数 | 类型 | 说明 | 平台差异说明 |
|---|---|---|---|
| from | String | 分享事件来源：button（页面内分享按钮）、menu（右上角分享按钮） | |
| target | Object | 如果 from 值是 button，则 target 是触发这次分享事件的 button，否则为 undefined | |
| webViewUrl | String | 页面中包含 <web-view> 组件时，返回当前 <web-view> 的url | 微信小程序1.6.4+、支付宝小程序、京东小程序 |
此事件需要 return 一个 Object，用于自定义分享内容，其内容如下：
| 参数名 | 类型 | 必填 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| title | String | 是 | 分享标题 | |
| path | String | 是 | 页面 path ，必须是以 / 开头的完整路径。注意：京东小程序，开头不要加'/' | QQ小程序不支持 |
| imageUrl | String | 否 | 分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4 | |
| content | String | 否 | 百度小程序表现为：分享内容；支付宝小程序表现为：吱口令文案 | 百度小程序、支付宝小程序 |
| desc | String | 否 | 自定义分享描述 | 支付宝小程序、抖音小程序、京东小程序 |
| bgImgUrl | String | 否 | 自定义分享二维码的背景图，建议大小750*950（网络图片路径） | 支付宝小程序 |
| query | String | 否 | QQ小程序查询字符串，必须是 key1=val1&key2=val2 的格式。从这条转发消息进入后，可通过 qq.getLaunchOptionSync() 或 qq.onShow() 获取启动参数中的 query。 | QQ小程序 |
| templateId | String | 否 | 开发者后台设置的分享素材模板 id | 抖音小程序 |
| mpId | String | 否 | 微信小程序id，此场景用于分享到微信后，用户点击分享卡片，进入该appid对应的微信小程序，实现引流到微信小程序 | 京东小程序 |
| type | Number | 否 | 转发形式（0 - 微信小程序正式版 ；1 - 微信小程序开发版；2 - 微信小程序体验版；京东App9.0.0开始不填或者其他值都会先判断是否有url参数，如果有打开分享后显示url对应页面，否则默认生成京东小程序官方的一个分享中间页面，点击可跳到京东app里面的对应小程序。） | 京东小程序 |
| mpPath | String | 否 | 微信小程序路径 | 京东小程序 |
| channel | String | 否 | 渠道（不写默认微信朋友，微信朋友圈） | 京东小程序 |
| url | String | 否 | h5链接地址（h5分享填写，不填默认中间页） | 京东小程序 |
| success | Function | 否 | 接口调用成功的回调函数 | 支付宝小程序、百度小程序 |
| fail | Function | 否 | 接口调用失败的回调函数 | 支付宝小程序、百度小程序 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） | 百度小程序 |
注意
- 微信、头条平台：只有定义了此事件处理函数，小程序右上角菜单才会显示“转发”按钮
- QQ小程序还支持通过qq.offShareAppMessage取消对系统分享按钮的监听
三、踩坑
问题：vue3 setup scirpt语法使用onShareAppMessage编译到微信小程序，小程序分享不生效
原因：当前onShareAppMessage其实是被全局的onShareAppMessage给覆盖了，执行顺寻是先执行的页面，再执行的全局。
ui-app issiiues： https://github.com/dcloudio/uni-app/issiiues/3084
解决方案：注冊全局的onShareAppMessage
globalShare.ts
/** @Author: LYM* @Date: 2024-03-25 19:23:20* @LastEditors: LYM* @LastEditTime: 2024-03-26 11:39:47* @Description: 分享*/
import { onShareAppMessage } from '@dcloudio/uni-app'
import share from '@/assets/images/share-1.jpg'export const globalShare = {onShareAppMessage(e: any) {if (e.from === 'button') {return {title: e.target.dataset.title ?? '科创知识订阅',path: `/pages/detail/index?url=${encodeURIComponent(e.target.dataset.url)}`,imageUrl: share,success() {debuggeruni.showToast({title: '分享成功'})},fail() {uni.showToast({title: '分享失败',icon: 'none'})}}}}
}
<buttonopen-type="share":data-url="url ?? ''":data-title="title"class="share-btn"><ekr-icon open-type="share" name="icon-share"></ekr-icon></button>