uniapp 小程序如何实现微信分享功能

在uniapp开发小程序时，如何实现微信分享功能？我按照官方文档配置了onShareAppMessage，但分享出去的页面无法获取自定义参数，标题和图片也不生效。请问具体的实现步骤和常见问题有哪些？

2 回复

在uniapp中，使用uni.share API实现微信分享。需先配置manifest.json，添加微信分享权限。代码示例：

uni.share({
  provider: 'weixin',
  type: 0,
  title: '分享标题',
  summary: '分享描述',
  href: '分享链接'
})

在 UniApp 中实现微信小程序的分享功能，主要通过配置页面的 onShareAppMessage 生命周期函数来实现。以下是具体步骤和代码示例：

实现步骤

  1. 在页面的 .vue 文件中定义 onShareAppMessage 方法。
  2. 设置分享的标题、路径、图片等参数。
  3. 可选：通过按钮触发分享（使用 button 组件并设置 open-type="share"）。

代码示例

// 在页面的 script 部分
export default {
  data() {
    return {
      // 页面数据
    }
  },
  onShareAppMessage() {
    return {
      title: '自定义分享标题', // 分享标题
      path: '/pages/index/index', // 分享页面路径，通常为当前页面
      imageUrl: '/static/share-image.png', // 可选，分享图片的链接
      success: (res) => {
        console.log('分享成功', res);
      },
      fail: (err) => {
        console.log('分享失败', err);
      }
    }
  }
}

通过按钮触发分享

在模板中添加一个分享按钮：

<button open-type="share">点击分享</button>

注意事项

  • 分享路径必须是当前小程序内的页面路径。
  • imageUrl 建议使用本地图片或网络图片（需配置域名白名单）。
  • 微信小程序默认支持右上角菜单分享，无需额外配置。

扩展功能

如需动态设置分享内容（例如根据页面数据变化）：

onShareAppMessage() {
  return {
    title: this.shareTitle, // 绑定 data 中的动态数据
    path: `/pages/detail/detail?id=${this.id}`
  }
}

以上代码即可实现基础分享功能。如果遇到问题，请检查小程序后台是否已开启分享权限，并确保路径正确。

回到顶部