uniapp uni.share mediaurl如何实现分享功能

在uniapp中使用uni.share时，如何正确设置mediaUrl参数实现分享功能？我按照文档配置了title、content和href，但分享到微信时图片不显示。请问mediaUrl需要什么格式的路径？是否支持网络图片链接或必须使用本地路径？具体代码应该如何编写才能确保各平台正常显示分享缩略图？

2 回复

使用uni.share实现分享功能，需先引入uni.share API。示例代码：

uni.share({
    provider: 'weixin',
    scene: 'WXSceneSession', // 分享到聊天界面
    type: 0,
    href: "http://example.com",
    title: "分享标题",
    summary: "分享描述",
    imageUrl: "图片URL",
    success: function (res) {
        console.log("分享成功");
    },
    fail: function (err) {
        console.log("分享失败：" + err);
    }
});

注意：需配置manifest.json中的分享权限，微信分享需申请AppID。


在 UniApp 中，使用 uni.share API 实现分享功能时，可以通过 mediaUrl 参数分享媒体内容（如音频、视频等）。以下是实现步骤和示例代码：

实现步骤

  1. 引入分享 API：使用 uni.share 方法。
  2. 配置分享参数：设置 provider（分享平台，如微信、QQ）、type（分享类型，0为图文，1为纯图片，2为音频，3为视频）、href（分享链接）、title（标题）、summary（摘要）、mediaUrl（媒体资源地址）等。
  3. 处理分享结果：通过回调函数处理成功或失败的情况。

示例代码

// 在页面方法中调用分享功能
shareMedia() {
  uni.share({
    provider: 'weixin', // 分享平台，例如微信
    type: 2, // 分享类型：2为音频，3为视频
    title: '分享标题',
    summary: '分享摘要',
    href: 'https://example.com', // 分享链接
    mediaUrl: 'https://example.com/media/audio.mp3', // 媒体资源URL（音频或视频地址）
    success: function(res) {
      console.log('分享成功：', res);
    },
    fail: function(err) {
      console.log('分享失败：', err);
    }
  });
}

参数说明

  • provider：指定分享平台，如 weixin（微信）、qq（QQ）等。需确保平台支持媒体分享。
  • type：
    • 2：音频分享（如 MP3）。
    • 3：视频分享（如 MP4）。
  • mediaUrl：媒体文件的远程 URL，必须可公开访问。
  • href：用户点击分享后跳转的页面链接。
  • title/summary：分享卡片的标题和描述。

注意事项

  • 平台支持：不同平台（如微信、QQ）对媒体分享的支持可能不同，需测试目标平台。
  • 网络资源：mediaUrl 必须是有效的远程 URL，本地文件路径可能不被支持。
  • 权限配置：在微信等平台分享时，需在对应开放平台配置合法域名。

通过以上代码和说明，你可以快速实现 UniApp 中的媒体分享功能。如有具体平台问题，可参考 UniApp 官方文档调整参数。

回到顶部