uniapp 项目实践总结(九)自定义分享组件

这篇文章主要是讲述自定义分享组件的方放，兼容网页 H5 端、微信小程序端和 App 端。

准备工作

首先我们从图标图库网站上面找一些常用的分享图标并下载下来；
在components新建一个q-share文件夹，并新建一个q-share.vue的组件；
按照前一篇所说的页面结构，编写好预定的分享页面；

原理分析

自定义分享组件就是采用各端支持的 API 方法进行封装设置，利用条件编译的语法进行分而实现。

H5 端分析

H5 端主要有两种分享方法：

普通浏览器自带分享按钮；微信内嵌浏览器，可调用js-sdk进行分享；
第三方平台网页应用：在第三方分享平台申请添加自己的应用，以便调用第三方的分享 API 进行分享；
网上公共分享链接：这里就使用网上公开的分享地址进行分享了。

以下罗列了几个常用的第三方分享平台的地址，感兴趣的可以收藏看一下。

常用开放平台：

小程序端分析

小程序端的分享目前 uniapp 不支持 API 调用，只能用户主动点击触发分享，可使用自定义按钮方式<button open-type="share">或监听系统右上角的分享按钮onShareAppMessage 进行自定义分享内容。

在这里可以查看微信小程序的分享 API进行小程序分享功能开发。

小程序文档：

APP 端分析

APP 端的分享可以自主控制分享的内容、形式及平台，提供了以下两种方法：

使用uni.shareAPI 方式调用社交 sdk 分享；
使用plus.share.sendWithSystem呼起手机系统的分享菜单；

开发者官网：

快应用官网：

组件实现

准备工作和原理分析完成后，接下来写一个简单的自定义分享组件。

模板部分

<view class="q-share" v-if="shares.show">
  <view :class="{'q-share-mak': true, 'active': shares.showMask}" @click="close('mask')"></view>
  <view
    :class="{'q-share-inner': true, [shares.options.dir]: true, 'active': shares.showBox}"
    :style="{'width': `${['left', 'right'].includes(shares.options.dir) ? shares.options.width + 'rpx' : '100%'}`, 'height': `${['up', 'down'].includes(shares.options.dir) ? shares.options.height + 'rpx' : '100%'}`, borderRadius: shares.options.radius+'rpx'}">
    <slot name="box">
      <view class="q-share-box">
        <view class="q-share-title"> 系统分享 </view>
        <scroll-view :scroll-x="true" class="q-share-content">
          <view class="q-share-list" :style="{'width': shareList.length*145+'rpx'}">
            <view
              class="q-share-item"
              v-for="item in shareList"
              :key="item.id"
              @click="shareSet(item)">
              <q-icon class="q-share-item-icon" :name="item.val" :size="20" />
              <text class="q-share-item-txt">{
  
   
   {item.name}}</text>
            </view>
          </view>
        </scroll-view>
        <view class="q-share-cancel" @click="close('cancel')"> 取消分享 </view>
      </view>
    </slot>
  </view>
</view>

样式部分

.q-share {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 199;
  .q-share-mak {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    transition: background 2s;
    z-index: 90;
    &.active {
      background: rgba(0, 0, 0, 0.35);
    }
  }
  .q-share-inner {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    background: rgba(255, 255, 255, 0.95);
    transition: all 0.5s;
    z-index: 95;
    .q-share-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      padding: 15rpx 25rpx;
      width: 100%;
      height: 100%;
      .q-share-title {
        width: 100%;
        line-height: 3;
        font-size: 28rpx;
        color: $uni-text-color;
        text-align: center;
      }
      .q-share-content {
        flex: 1;
        box-sizing: border-box;
        padding: 20rpx;
        width: 100%;
        height: calc(100% - 140rpx);
        .q-share-list {
          display: flex;
          flex-flow: row nowrap;
          box-sizing: border-box;
          padding: 25rpx 0;
          height: 100%;
          .q-share-item {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 145rpx;
            height: 100%;
            .q-share-item-icon {
              padding: 0;
            }
            .q-share-item-txt {
              margin-top: 10rpx;
              font-size: 24rpx;
            }
          }
        }
      }
      .q-share-cancel {
        width: 100%;
        line-height: 2;
        font-size: 28rpx;
        color: $uni-text-color-grey;
        text-align: center;
      }
    }
    &.down,
    &.up {
      left: 0;
    }
    &.down {
      bottom: 0;
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
      transform: translateY(100%);
      &.active {
        transform: translateY(0);
      }
    }
    &.up {
      top: 0;
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
      transform: translateY(-100%);
      &.active {
        transform: translateY(0);
      }
    }
    &.left,
    &.right {
      top: 0;
      width: 0;
    }
    &.left {
      left: 0;
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
      transform: translateX(-100%);
      &.active {
        transform: translateX(0);
      }
    }
    &.right {
      right: 0;
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
      transform: translateX(100%);
      &.active {
        transform: translateX(0);
      }
    }
  }
}

脚本部分

引入依赖包和属性设置

import {
   
    
     ref, reactive, computed } from "vue";

// 属性
const showTimer = ref(null); // 显示延迟
const showTime = ref(100); // 显示延迟时间
const showCloseTimer = ref(null); // 显示关闭延迟
const showCloseTime = ref(300); // 显示关闭延迟时间

const shares = reactive({
   
    
    
  show: false, // 显示分享框
  showMask: false, // 显示模态框
  showBox: false,