uniapp实现微信QQ的分享组件案例

Uniapp 可以通过使用原生的微信和 QQ SDK 实现分享功能。以下是一个实现微信和 QQ 分享的组件案例：

1. 创建一个分享组件

在 `components` 目录下创建一个 `share` 组件，包含以下代码：

<template>
  <div>
    <button @click="shareToWechat">分享到微信</button>
    <button @click="shareToQQ">分享到QQ</button>
  </div>
</template>

<script>
export default {
  methods: {
    shareToWechat() {
      // 调用微信分享 SDK
    },
    shareToQQ() {
      // 调用 QQ 分享 SDK
    }
  }
}
</script>

2. 集成微信 SDK

使用 `uni.getProvider` 方法获取微信 SDK 是否可用，并使用 `uni.showModal` 方法提示用户安装微信客户端。在 `shareToWechat` 方法中调用微信分享 SDK：

shareToWechat() {
  uni.getProvider({
    service: 'share',
    success: (res) => {
      if (~res.provider.indexOf('weixin')) {
        uni.showModal({
          title: '提示',
          content: '是否分享到微信朋友圈',
          success: (res) => {
            if (res.confirm) {
              uni.share({
                provider: 'weixin',
                scene: 'WXSceneTimeline',
                type: 0,
                title: '分享标题',
                summary: '分享描述',
                href: '分享链接',
                success: () => {
                  console.log('分享成功')
                },
                fail: (err) => {
                  console.log('分享失败', err)
                }
              })
            }
          }
        })
      } else {
        uni.showModal({
          title: '提示',
          content: '请先安装微信客户端'
        })
      }
    }
  })
}

3. 集成 QQ SDK

使用 `uni.getProvider` 方法获取 QQ SDK 是否可用，并使用 `uni.showModal` 方法提示用户安装 QQ 客户端。在 `shareToQQ` 方法中调用 QQ 分享 SDK：

shareToQQ() {
  uni.getProvider({
    service: 'share',
    success: (res) => {
      if (~res.provider.indexOf('qq')) {
        uni.showModal({
          title: '提示',
          content: '是否分享到QQ空间',
          success: (res) => {
            if (res.confirm) {
              uni.share({
                provider: 'qq',
                scene: 'QQ',
                type: 5,
                title: '分享标题',
                summary: '分享描述',
                href: '分享链接',
                success: () => {
                  console.log('分享成功')
                },
                fail: (err) => {
                  console.log('分享失败', err)
                }
              })
            }
          }
        })
      } else {
        uni.showModal({
          title: '提示',
          content: '请先安装QQ客户端'
        })
      }
    }
  })
}

以上就是使用 Uniapp 实现微信和 QQ 分享的组件案例。需要注意的是，需要在微信和 QQ 开放平台注册应用并获取对应的 AppID 和 AppKey，并将其配置到 Uniapp 项目中。