更新记录

1.0.0（2025-04-08） 下载此版本

• 初始版本发布
• 支持自定义分享项
• 支持图标颜色和背景色配置
• 支持动画效果
• 使用阿里巴巴矢量图标库

平台兼容性

uni-app

uni-share 分享面板组件

一个基于阿里巴巴矢量图标库的分享面板组件,支持自定义分享项和样式。

安装

1. 在插件市场点击下载
2. 在项目中导入插件

使用说明

1. 在页面中引入组件:

<template>
  <view>
    <uni-share 
      :visible.sync="shareVisible" 
      :title="'分享到'" 
      :items="shareItems"
      @select="handleShareSelect"
    />
  </view>
</template>

<script>
import uniShare from '@/uni_modules/uni-share/uni-share.vue'

export default {
  components: {
    uniShare
  },
  data() {
    return {
      shareVisible: false,
      shareItems: [
        { iconClass: 'icon-pengyouquan', text: '朋友圈', color: '#2196F3', bgColor: '#E3F2FD', type: 'moments' },
        { iconClass: 'icon-weixinhaoyou', text: '微信好友', color: '#07C160', bgColor: '#E9F7EF', type: 'wechat' },
        { iconClass: 'icon-jubao', text: '举报', color: '#F44336', bgColor: '#FFEBEE', type: 'report' },
        { iconClass: 'icon-buganxingqu_mian', text: '不感兴趣', color: '#E91E63', bgColor: '#FCE4EC', type: 'dislike' }
      ]
    }
  },
  methods: {
    handleShareSelect(item) {
      // 处理分享选择事件
      switch(item.type) {
        case 'moments':
          // 处理朋友圈分享
          break;
        case 'wechat':
          // 处理微信好友分享
          break;
        case 'report':
          // 处理举报
          break;
        case 'dislike':
          // 处理不感兴趣
          break;
      }
    }
  }
}
</script>

2. 在页面样式中引入图标库:

<style>
@import url('//at.alicdn.com/t/c/font_4885460_kz1i8sicklc.css');
</style>

组件属性

items 配置项

每个分享项可以配置以下属性:

事件

样式说明

组件使用 rpx 作为单位,支持响应式布局。主要样式包括:

• 分享面板背景色: #ffffff
• 标题文字大小: 16px
• 图标大小: 28px
• 分享项图标背景圆角: 50rpx
• 分享项文字大小: 12px

目录结构说明

插件包含以下目录:

• uni_modules/uni-share: 主要组件目录
  • uni-share.vue: 主组件文件
  • README.md: 说明文档
  • package.json: 组件配置
• components/hi-button: 兼容目录
  • hi-button.vue: 兼容包装组件
  • readme.md: 兼容说明

注意: components/hi-button 目录是为了满足插件市场的目录结构要求而创建的,实际使用时推荐直接使用 uni_modules/uni-share 中的组件。

打包说明

打包上传插件市场时，请确保包含以下目录:

1. uni_modules/uni-share 目录
2. components/hi-button 目录

两个目录缺一不可，否则可能会导致上传失败。

注意事项

1. 组件依赖阿里巴巴矢量图标库,请确保网络连接正常
2. 图标类名需要与阿里巴巴矢量图标库中的图标名称保持一致
3. 建议在页面中统一引入图标库 CSS,避免重复引入
4. 打包时必须包含 components/hi-button 目录

示例图片

[示例图片链接]

更新日志

v1.0.0

• 初始版本发布
• 支持自定义分享项
• 支持图标颜色和背景色配置
• 支持动画效果
• 使用阿里巴巴矢量图标库