更新记录
1.0.3(2025-06-02) 下载此版本
- 文档使用说明调整。
1.0.2(2025-06-02) 下载此版本
- 修复文档参数说明
1.0.1(2025-06-02) 下载此版本
- 新增:分享支持多种格式(图片、文字、图片+文字)。
- 新增:Instagram 支持分享到动态。
- 新增:Instagram 分享到快拍支持分享贴图(设置渐变背景色)、贴图+背景
- 新增:检测到应用未安装时触发
onNotInstalled
回调。 - 新增:首次分享时会将分享图片进行临时缓存,避免每次分享都重新下载。
- 修复:
IOS
端总是返回应用未安装问题。
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | - | - | - | - | 5.0 | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | - | × | × | × | × |
uni-app x
Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
---|---|---|---|---|---|
- | - | 5.0 | - | - | × |
es-share 分享插件
支持分享到 `、
Instagram、
Twitter`,后续支持其他分享。
说明
使用本插件时,需要将包名换成自己的包名(全局搜索:
com.test.plugins
)替换。
IOS
分享带有图片的内容不能直接打开对应的应用,所以设置好参数后调用系统分享表,用户需手动选择对应的分享应用
分享到 Instagram
参数
分享到动态参数列表
参数名 | 类型 | 是否必填 | 说明 |
---|---|---|---|
imageUri |
string |
是 | 图片的本地路径 URI,用于分享的主要图片。 |
fileNamePrefix |
string |
否 | 可选的文件名前缀,用于生成分享文件名。 |
onNotInstalled |
cb |
否 | Instagram 未安装时触发的回调函数。 |
分享到快拍参数列表
分享到快拍时需要申请 Facebook 应用 ID -> 申请入口
参数名 | 类型 | 是否必填 | 说明 |
---|---|---|---|
applicationID |
string |
是 | 应用的 Facebook 应用 ID,用于标识调用方应用。 |
backgroundImage |
string |
否 | 快拍背景图的 URI,作为主要背景图像。 |
stickerImage |
string |
否 | 贴纸图像的 URI,显示在快拍背景上方。 |
backgroundTopColor |
string |
否 | 快拍背景的顶部颜色,格式如 #RRGGBB 。 |
backgroundBottomColor |
string |
否 | 快拍背景的底部颜色,格式如 #RRGGBB 。 |
onNotInstalled |
cb |
否 | Instagram 未安装时触发的回调函数。 |
使用示例
<template>
<button @click="handleShareInstagram">分享到 Instagram 动态</button>
<button @click="handleShareInstagramBackground">
分享到 Instagram 快拍(背景素材)
</button>
<button @click="handleShareInstagramSticker">
分享到 Instagram 快拍(贴图素材)
</button>
<button @click="handleShareInstagramBackgroundAndSticker">
分享到 Instagram 快拍(背景和贴图素材)
</button>
</template>
<script setup>
import {
shareToInstagramFeed
shareToInstagramFeed,
shareToInstagramBackground,
shareToInstagramSticker,
shareToInstagramBackgroundAndSticker
} from '@/uni_modules/es-share';
const path = 'https://img-cdn-tc.dcloud.net.cn/account/identicon/2b1967ce3652df54c3aa29625bab22dd.png';
const path2 = 'https://web-ext-storage.dcloud.net.cn/uni-app-x/logo.ico'
// 分享到 Instagram 动态
const handleShareInstagram = () => {
shareToInstagramFeed({
imageUri: path,
onNotInstalled() {
console.log('未安装');
}
});
};
// 分享到 Instagram 快拍(背景素材)
const handleShareInstagramBackground = () => {
shareToInstagramBackground({
applicationID: '38487',
backgroundImage: path
});
};
// 分享到 Instagram 快拍(贴图素材)
const handleShareInstagramSticker = () => {
shareToInstagramSticker({
applicationID: '38487',
backgroundImage: path,
backgroundTopColor: '#ffc0cb',
backgroundBottomColor: '#000'
});
};
// 分享到 Instagram 快拍(背景和贴图素材)
const handleShareInstagramBackgroundAndSticker = () => {
shareToInstagramBackgroundAndSticker({
applicationID: '38487',
backgroundImage: path2,
stickerImage: path
});
};
</script>
分享到 Twitter(X)
参数
参数名 | 类型 | 是否必填 | 说明 |
---|---|---|---|
imageUri |
string |
否 | 要分享的图片路径 URI。 |
text |
string |
否 | 要分享的文字内容。 |
onNotInstalled |
cb |
否 | Twitter 未安装时触发的回调函数。 |
imageUri
和text
必填一个。 传入图片时,由于iOS
不支持直接打开应用,所以会将图片复制到剪切版中,将文字传递过去并打开
使用示例
<template>
<button @click="handleShareTwitter1">分享图片+文字到 X</button>
<button @click="handleShareTwitter2">分享文字到 X</button>
<button @click="handleShareTwitter3">分享图片到 X</button>
</template>
<script setup>
import { shareToTwitter } from '@/uni_modules/es-share';
const path = 'https://img-cdn-tc.dcloud.net.cn/account/identicon/2b1967ce3652df54c3aa29625bab22dd.png';
const path2 = 'https://web-ext-storage.dcloud.net.cn/uni-app-x/logo.ico'
// 分享图片+文字到 X(Twitter)
const handleShareTwitter1 = () => {
shareToTwitter({
imageUri: path,
text: '我是图片加文字'
});
};
// 分享文字到 X(Twitter)
const handleShareTwitter2 = () => {
shareToTwitter({
text: '我只是文字'
});
};
// 分享图片到 X(Twitter)
const handleShareTwitter3 = () => {
shareToTwitter({
imageUri: path
});
};
</script>
分享到
参数
参数名 | 类型 | 是否必填 | 说明 |
---|---|---|---|
imageUri |
string |
否 | 要分享的图片路径 URI。 |
text |
string |
否 | 要分享的文字内容。 |
onNotInstalled |
cb |
否 | 未安装时触发的回调函数。 |
imageUri
和text
必填一个。IOS
传入图片时,调用系统分享表,传入文字则直接打开应用
使用示例
<template>
<button @click="handleShare1">分享图片+文字到 </button>
<button @click="handleShare2">分享文字到 </button>
<button @click="handleShare3">分享图片到 </button>
</template>
<script setup>
import { shareToTwitter } from '@/uni_modules/es-share';
const path = 'https://img-cdn-tc.dcloud.net.cn/account/identicon/2b1967ce3652df54c3aa29625bab22dd.png';
const path2 = 'https://web-ext-storage.dcloud.net.cn/uni-app-x/logo.ico'
// 分享图片+文字到
const handleShare1 = () => {
shareTo({
imageUri: path,
text: '我是图片加文字'
});
};
// 分享文字到
const handleShare2 = () => {
shareTo({
text: '我只是文字'
});
};
// 分享图片到
const handleShare3 = () => {
shareTo({
imageUri: path
});
};
</script>