很奇怪的一点,uni-starter中并没有默认配置微信小程序(或者别的小程序)的分享功能,查阅官方文档中的分享部分,找到了解决方法:https://uniapp.dcloud.io/api/plugins/share?id=showsharemenu
首先,如果没有设置分享菜单,在小程序会显示该页面没有设置分享
设置分享的API:
uni.showShareMenu(OBJECT)
小程序的原生菜单中显示分享按钮
平台差异说明
App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序、飞书小程序 | QQ小程序 |
---|---|---|---|---|---|---|
x | x | √ | √ | √ | √ | √ |
属性 | 类型 | 必填 | 说明 | 平台差异说明 |
---|---|---|---|---|
withShareTicket | Boolean | 否 | 是否使用带 shareTicket 的转发,默认为 flase。详情 | 微信小程序 |
title | String | 否 | 分享标题 | 百度小程序 |
content | String | 否 | 分享内容 | 百度小程序 |
imageUrl | String | 否 | 分享图标 | 百度小程序 |
path | String | 否 | 页面 path ,必须是以 / 开头的完整路径。 | 百度小程序 |
success | Function | 否 | 接口调用成功的回调函数 | |
fail | Function | 否 | 接口调用失败的回调函数 | |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
在代码中可以在组件创建时使用,这样当前页面就能显示分享按钮了:
监听组件创建可以使用钩子函数created()
<script>
created(){
uni.showShareMenu({
success: function(){
//成功后的回调,也可以不设置
}
})
}
</script>
同时还有隐藏分享菜单的API
uni.hideShareMenu(OBJECT)
小程序的原生菜单中隐藏分享按钮
平台差异说明
App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序、飞书小程序 |
---|---|---|---|---|---|
x | x | √ | √(1.17.0+) | x | √ |
属性 | 类型 | 必填 | 说明 | 平台差异说明 |
---|---|---|---|---|
hideShareItems | Array | 否 | [‘qq’]控制是否隐藏”转发”,[‘qzone’]控制是否隐藏”分享到空间”,不带hideShareItems参数默认”转发”、”分享到空间”全隐藏。目前只支持’qq’、’qzone’。 | QQ小程序 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
代码示例
uni.hideShareMenu()
以及监听分享时间的API
onShareAppMessage(OBJECT)
小程序中用户点击分享后,在 js 中定义 onShareAppMessage 处理函数(和 onLoad 等生命周期函数同级),设置该页面的分享信息。
- 用户点击分享按钮的时候会调用。这个分享按钮可能是小程序右上角原生菜单自带的分享按钮,也可能是开发者在页面中放置的分享按钮(
- 此事件需要 return 一个Object,用于自定义分享内容。
微信小程序平台的分享管理比较严格,请参考 小程序分享指引。
平台差异说明
App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序、飞书小程序 | QQ小程序 | 快手小程序 |
---|---|---|---|---|---|---|---|
x | x | √ | √ | x | √ | √ | √ |
参数 | 类型 | 说明 | 平台差异说明 |
---|---|---|---|
from | String | 分享事件来源:button(页面内分享按钮)、menu(右上角分享按钮) | |
target | Object | 如果 from 值是 button,则 target 是触发这次分享事件的 button,否则为 undefined | |
webViewUrl | String | 页面中包含 |
微信小程序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 | 字节跳动小程序 |
success | Function | 否 | 接口调用成功的回调函数 | 支付宝小程序、百度小程序 |
fail | Function | 否 | 接口调用失败的回调函数 | 支付宝小程序、百度小程序 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) | 百度小程序 |