uniapp分享微信 朋友圈 微博 qq

封装了一个组件

<template>
  <view
    class="maskBody"
    v-if="isShow"
    @click="isShow = false"
    :style="{ zIndex: zIndex }"
  >
    <view class="buttonArea" @click.stop="noAct">
      <view class="item" v-if="shareWith.weixin" @click="share('friend')">
        <image src="@/static/share/wx.png" mode="widthFix"></image>
        <text>微信好友</text>
      </view>
      <view class="item" v-if="shareWith.weixin" @click="share('line')">
        <image src="@/static/share/pyq.png" mode="widthFix"></image>
        <text>微信朋友圈</text>
      </view>
      <view class="item" v-if="shareWith.qq" @click="share('qq')">
        <image src="@/static/share/qq.png" mode="widthFix"></image>
        <text>QQ</text>
      </view>
      <view class="item" v-if="shareWith.sinaweibo" @click="share('weibo')">
        <image src="@/static/share/wb.png" mode="widthFix"></image>
        <text>微博</text>
      </view>
      <!-- <view class="item" v-if="shareWith.withSys" @click="share('sys')">
				<image src="@/static/mark-simpleshare/more.png" mode="widthFix" ></image>
				<text>分享至..</text>
			</view> -->
    </view>
    <view class="close"> 取消 </view>
  </view>
</template>

<script>
  let shareOption = {}
  export default {
    data() {
      return {
        isShow: false,
        shareWith: {
          sinaweibo: false,
          qq: false,
          weixin: false,
          withSys: false
        }
      }
    },
    props: {
      zIndex: {
        type: Number,
        default: 1000
      }
    },
    created() {
      const that = this
      // #ifdef APP-PLUS
      this.shareWith.withSys = true
      uni.getProvider({
        service: 'share',
        success: function (res) {
          console.log(res)
          if (~res.provider.indexOf('qq')) that.shareWith.qq = true
          if (~res.provider.indexOf('sinaweibo')) {
            that.shareWith.sinaweibo = true
          }
          if (~res.provider.indexOf('weixin')) that.shareWith.weixin = true
        }
      })
      // #endif
    },
    methods: {
      noAct() {},
      show(title, summary, href, imageUrl, id, path, type) {
        shareOption = {
          title: typeof title === 'undefined' ? '' : title,
          summary: typeof summary === 'undefined' ? '' : summary,
          href: typeof href === 'undefined' ? '' : href,
          imageUrl: typeof imageUrl === 'undefined' ? '' : imageUrl,
          miniProgram:
            typeof id === 'undefined'
              ? {}
              : {
                  id: id,
                  path: path,
                  type: typeof type === 'undefined' ? 0 : type,
                  webUrl: typeof href === 'undefined' ? '' : href
                }
        }
        this.isShow = true
      },
      shareFail(res) {
        console.log('res1', res)
        if (res.errCode == -8 || res.errCode == -3) {
          uni.showToast({
            icon: 'none',
            title: '未安裝客戶端'
          })
        } else {
          uni.showToast({
            icon: 'none',
            title: 'JSON.stringify(err)'
          })
        }
      },
      _swx(scene) {
        const that = this
        if (
          (shareOption.title != '' || shareOption.summary != '') &&
          shareOption.href != '' &&
          shareOption.imageUrl != ''
        ) {
          uni.share({
            provider: 'weixin',
            scene: scene,
            type: 0,
            href: shareOption.href,
            title: shareOption.title,
            summary: shareOption.summary,
            imageUrl: shareOption.imageUrl,
            success: () => {
              that.isShow = false
            },
            fail: this.shareFail
          })
        } else {
          if (shareOption.title != '') {
            uni.share({
              provider: 'weixin',
              scene: scene,
              type: 1,
              summary: shareOption.title,
              success: () => {
                that.isShow = false
              },
              fail: this.shareFail
            })
          } else if (shareOption.imageUrl != '') {
            uni.share({
              provider: 'weixin',
              scene: scene,
              type: 2,
              imageUrl: shareOption.imageUrl,
              success: () => {
                that.isShow = false
              },
              fail: this.shareFail
            })
          }
        }
      },
      share(way) {
        const that = this
        console.log(shareOption.miniProgram)
        if (way == 'friend') {
          this._swx('WXSceneSession')
        } else if (way == 'line') {
          this._swx('WXSenceTimeline')
        } else if (way == 'mp') {
          uni.share({
            provider: 'weixin',
            scene: 'WXSceneSession',
            title: shareOption.title,
            type: 5,
            imageUrl: shareOption.imageUrl,
            miniProgram: shareOption.miniProgram,
            success: () => {
              that.isShow = false
            },
            fail: this.shareFail
          })
        } else if (way == 'weibo') {
          uni.share({
            provider: 'sinaweibo',
            type: 0,
            href: shareOption.href,
            title: shareOption.title,
            summary: shareOption.summary,
            imageUrl: shareOption.imageUrl,
            success: () => {
              that.isShow = false
            },
            fail: this.shareFail
          })
        } else if (way == 'qq') {
          if (shareOption.title != '') {
            uni.share({
              provider: 'qq',
              type: 1,
              href: shareOption.href,
              title: shareOption.title,
              summary: shareOption.title,
              success: () => {
                that.isShow = false
              },
              fail: this.shareFail
            })
          } else if (shareOption.imageUrl != '') {
            uni.share({
              provider: 'qq',
              type: 2,
              href: shareOption.href,
              title: shareOption.title,
              imageUrl: shareOption.imageUrl,
              success: () => {
                that.isShow = false
              },
              fail: this.shareFail
            })
          }
        } else {
          uni.shareWithSystem({
            href: shareOption.href,
            type: 'text',
            summary: shareOption.title,
            imageUrl: shareOption.imageUrl,
            success: () => {
              that.isShow = false
            },
            fail: this.shareFail
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .maskBody {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    background-color: rgba(59, 59, 59, 0.8);

    .buttonArea {
      position: relative;
      background-color: #ffffff;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: nowrap;
      margin: 0 2.5%;
      margin-bottom: 28rpx;
      width: 95%;
      border-radius: 15rpx;
      padding: 45rpx;
      box-sizing: border-box;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;

        image {
          width: 84rpx;
          margin-bottom: 10rpx;
        }
        text {
          font-size: 12px;
        }
      }
    }
    .close {
      background: #fff;
      margin: 0 2.5%;
      margin-bottom: 48rpx;
      width: 95%;
      border-radius: 15rpx;
      padding: 35rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>

调用

 <share ref="simpleShare" :zIndxe="9999"></share>

  onNavigationBarButtonTap(e) {
      // this.show = true
      this.$refs.simpleShare.show(
        '分享標題',
        '分享描述',
        'https://www.baidu.com/圖片地址',
        'gh_12345',
        '/pages/xxxx',
        0
      )
    },