更新记录

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 分享插件

支持分享到 `、InstagramTwitter`,后续支持其他分享。

说明

使用本插件时,需要将包名换成自己的包名(全局搜索: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 未安装时触发的回调函数。

imageUritext 必填一个。 传入图片时,由于 iOS 不支持直接打开应用,所以会将图片复制到剪切版中,将文字传递过去并打开 Twitter, 用户需要手动粘贴图片

使用示例

<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 未安装时触发的回调函数。

imageUritext 必填一个。 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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问