在 UniApp 中,onShareAppMessage 是用于配置页面分享信息的生命周期函数,主要在微信小程序、抖音小程序等平台生效(不同平台对分享的支持略有差异,以微信小程序为例说明)。
基本用法
onShareAppMessage 需要定义在页面的 <script> 中,与 data、onLoad 等同级,返回一个对象用于配置分享信息。
示例代码(页面级配置)
<template>
<view>
<!-- 如需通过按钮触发分享,需给按钮设置 open-type="share" -->
<button open-type="share">点击分享</button>
</view>
</template>
<script>
export default {
data() {
return {
// 页面数据
};
},
onLoad() {
// 页面加载时执行
},
// 配置分享信息
onShareAppMessage(res) {
// res 是分享事件对象,包含分享来源等信息
// res.from 可能的值:'button'(来自页面分享按钮)、'menu'(来自右上角菜单)
// 定义分享信息(根据需求动态配置)
let shareInfo = {
title: '自定义分享标题', // 分享标题(默认使用当前页面标题)
path: '/pages/index/index', // 分享后打开的页面路径(必填,相对路径,可带参数)
imageUrl: '/static/share-img.png' // 分享图片(默认使用页面截图,建议自定义)
};
// 可根据分享来源动态修改分享信息
if (res.from === 'button') {
// 来自页面按钮的分享,可自定义不同内容
shareInfo.title = '来自按钮的分享';
}
return shareInfo;
}
};
</script>
关键参数说明
-
title 分享标题,字符串类型。默认使用当前页面的标题(
pages.json中配置的navigationBarTitleText)。 -
path 分享后打开的页面路径(必填),格式为相对路径(如
/pages/detail/detail)。如需传递参数,可在路径后拼接 query,例如:/pages/detail/detail?id=123&name=test。 -
imageUrl 分享图片的路径,支持本地资源(如
/static/share.png)或网络图片(需确保网络图片域名在小程序后台配置了合法域名)。若不设置,微信小程序会默认截取当前页面的截图作为分享图。
注意事项
- 平台支持 :
onShareAppMessage主要在微信小程序、抖音小程序等平台生效,H5 或 App 端需结合平台自身的分享 API 处理(如 App 端可用uni.share方法)。 - 路径规范 :
path必须以/开头,且对应的页面需在pages.json中注册。 - 动态配置 :可根据页面数据动态生成分享信息(例如根据当前商品 ID 拼接
path参数)。 - 分享按钮 :页面中如需通过按钮触发分享,需给按钮添加
open-type="share"属性,点击后会自动调用onShareAppMessage。
通过以上配置,即可在 UniApp 中实现页面的分享功能,具体效果可在对应平台的开发者工具中调试查看。