xydata-tools-uniapp

鑫义科技 uni-app 组件库，提供跨 H5、微信小程序和 App 的媒体、附件选择上传能力。

组件

| 组件 | 用途 | | --- | --- | | MediaPicker | 图片、视频选择上传，支持拖拽排序、只读预览和图片水印 | | FilePicker | 文档、压缩包和图片附件选择上传、预览与删除 |

安装

npm install xydata-tools-uniapp
# 或
yarn add xydata-tools-uniapp

引用方式

H5

H5 推荐从包入口引入，并在当前页面注册组件。这样运行时和编辑器都能识别组件及其 Props。

<script>
import { MediaPicker, FilePicker } from 'xydata-tools-uniapp';

export default {
  components: { MediaPicker, FilePicker },
};
</script>

微信小程序

微信小程序优先推荐使用 easycom。它由 uni-app 编译器直接解析组件路径，使用页面无需重复 import 或注册，最适合小程序项目。

// 如需显式注册或 easycom 无法解析，再使用深层 .vue 路径
import MediaPicker from 'xydata-tools-uniapp/dist/components/uni-app/media-picker/media-picker.vue';
import FilePicker from 'xydata-tools-uniapp/dist/components/uni-app/file-picker/file-picker.vue';

export default {
  components: { MediaPicker, FilePicker },
};

在 pages.json 中配置：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^MediaPicker$": "xydata-tools-uniapp/dist/components/uni-app/media-picker/media-picker.vue",
      "^FilePicker$": "xydata-tools-uniapp/dist/components/uni-app/file-picker/file-picker.vue"
    }
  }
}

编辑器提示

easycom 负责自动引入和编译，不一定能提供模板 Props 提示。需要编辑器提示时，在当前页面显式 import 并写入 components；这属于开发体验优化，不改变微信小程序的首选运行方式。

本地开发

# 组件库根目录
yarn dev

# 示例工程目录，建立本地链接
yarn link xydata-tools-uniapp

然后使用 HBuilderX 打开 example-uniapp。示例页面采用显式 import 和注册，便于同时验证 H5、微信小程序和编辑器提示。

构建与发布

prepack 会在发布前自动执行 Father 构建、Vue 内 SCSS 编译、已编译 SCSS 清理，以及发布产物检查。

npm run prepack
npm publish

npm publish 会自动触发 prepack，通常不需要手动重复执行。发布前可使用 npm pack --dry-run 查看最终文件清单。

类型声明

公开类型位于 src/types，按组件或模块拆分。构建后入口为 dist/types/index.d.ts，组件深层 .vue 路径旁保留对应的声明桥接文件。

import {
  FilePicker,
  MediaPicker,
  type MediaFile,
  type WatermarkConfig,
} from 'xydata-tools-uniapp';

目录结构

src/
  index.js              # 包入口
  types/                # 公开类型声明
  components/uni-app/   # uni-app 组件源码
  utils/                # 水印及共享工具
  assets/               # 组件资源
docs/uniapp/            # 组件文档
example-uniapp/         # 示例工程
scripts/                # 发布产物检查脚本