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

以下是一个基于uniapp实现微信和QQ分享图文的组件案例：

1. 在项目中创建一个Share组件，包含分享功能的按钮和分享的图片、标题、描述等信息。

2. 在Share组件中引入微信和QQ的分享SDK，可以使用官方提供的JS-SDK或者第三方插件。

3. 编写Share组件的方法，在方法中调用微信和QQ的分享接口，传入分享的图片、标题、描述等信息。

4. 在需要使用Share组件的页面中引入Share组件，并在页面中设置分享信息和回调函数。

5. 当用户点击分享按钮时，触发Share组件的方法，进行分享操作。

示例代码如下：

<template>
  <div>
    <button @click="share">分享</button>
  </div>
</template>

<script>
  import wechat from '@/utils/wechat'
  import qq from '@/utils/qq'

  export default {
    name: 'Share',
    props: {
      title: String,
      desc: String,
      imgUrl: String,
      link: String
    },
    methods: {
      share() {
        // 调用微信分享
        wechat.share({
          title: this.title,
          desc: this.desc,
          imgUrl: this.imgUrl,
          link: this.link
        }, () => {
          // 分享成功回调
          console.log('分享成功')
        }, () => {
          // 分享失败回调
          console.log('分享失败')
        })

        // 调用QQ分享
        qq.share({
          title: this.title,
          desc: this.desc,
          imgUrl: this.imgUrl,
          link: this.link
        }, () => {
          // 分享成功回调
          console.log('分享成功')
        }, () => {
          // 分享失败回调
          console.log('分享失败')
        })
      }
    }
  }
</script>

在上面的示例代码中，引入了微信和QQ的分享SDK，并定义了一个Share组件，包含分享的按钮和分享的图片、标题、描述等信息。在组件的方法中调用微信和QQ的分享接口，传入分享的信息，并设置分享成功和分享失败的回调函数。在需要使用分享功能的页面中引入Share组件，并设置分享信息和回调函数，在用户点击分享按钮时触发Share组件的方法，进行分享操作。

需要注意的是，微信和QQ的分享SDK需要在uniapp的manifest.json文件中进行配置，具体配置方法可以参考官方文档。