V8程序

Appearance

uni-app 实现小程序按钮分享 ​

在 uni-app 中实现微信小程序的点击按钮分享功能，可以通过设置页面的 onShareAppMessage 方法和在按钮的点击事件中调用 uni.share API 来实现。

1. 在页面中定义 onShareAppMessage 方法 ​

在微信小程序中，页面的 onShareAppMessage 方法用于设置分享内容。这个方法在用户点击转发按钮（或页面右上角的分享菜单）时被调用。

在你的 *.vue 页面文件中添加如下代码：

javascript
export default {
  onShareAppMessage(res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '分享的标题',
      path: '/pages/index/index', // 分享的路径（分享后打开的页面路径）
      imageUrl: 'https://example.com/image.png' // 自定义分享图片
    }
  }
}

2. 在页面的模板中添加分享按钮 ​

在页面的模板中，可以通过 <button> 元素来触发分享操作。将 open-type 属性设置为 share，微信小程序会自动调用 onShareAppMessage 方法。

html
<template>
  <view>
    <!-- 点击按钮触发分享 -->
    <button open-type="share" class="share-button">分享给好友</button>
  </view>
</template>

<style>
  .share-button {
    padding: 10px;
    background-color: #1aad19;
    color: white;
    border-radius: 5px;
  }
</style>

3. 使用 uni.share API 进行自定义分享（可选） ​

如果你需要在按钮点击时自定义分享内容，而不依赖于 onShareAppMessage，可以使用 uni.share API。

在按钮的点击事件中调用 uni.share：

html
<template>
  <view>
    <button @click="shareToWeChat" class="share-button">自定义分享</button>
  </view>
</template>

<script>
  export default {
    methods: {
      shareToWeChat() {
        uni.share({
          provider: 'weixin',
          type: 0, // 0表示图文
          title: '分享的标题',
          summary: '分享的摘要',
          href: '/pages/index/index', // 分享的路径
          imageUrl: 'https://example.com/image.png', // 分享的图片
          success() {
            uni.showToast({
              title: '分享成功',
              icon: 'success',
              duration: 2000
            })
          },
          fail(e) {
            console.log('分享失败', e)
            uni.showToast({
              title: '分享失败',
              icon: 'none',
              duration: 2000
            })
          }
        })
      }
    }
  }
</script>

4. 总结 ​

  • 使用 open-type="share"：微信小程序自动调用 onShareAppMessage 方法来设置分享内容。
  • 使用 uni.share API：适用于需要自定义或动态调整分享内容的场景。

这两种方式可以满足微信小程序中点击按钮进行分享的需求。