【亲测免费】微信小程序图片拖拽排序组件：wx-drag-img 安装与使用指南

2026-01-20 01:02:40作者：秋阔奎Evelyn

项目地址：https://gitcode.com/gh_mirrors/wx/wx-drag-img

项目概述

wx-drag-img 是一个专为微信小程序设计的图片拖拽排序组件。它允许用户通过原生微信小程序语法轻松实现图片列表的拖动重排功能，简化了开发者在微信小程序中集成此类交互的需求。

目录结构及介绍

仓库的主要目录结构如下：

.
├── example           # 示例工程，展示了如何使用组件
├── src               # 组件的核心源代码所在目录
│   ├── ...            # 包含组件的相关JavaScript、样式等文件
├── .gitignore        # 忽略文件配置
├── npmignore         # npm发布时忽略的文件或目录配置
├── LICENSE           # 开源许可协议文件，采用MIT License
├── README.md         # 项目说明文档，您现在阅读的就是此文件的内容
├── gulpfile.js       # Gulp构建任务文件
├── jest.config.cjs   # Jest测试配置文件
├── package.json      # Node.js项目的配置文件，包括依赖和脚本命令
├── pnpm-lock.yaml    # 包锁定文件，用于确保依赖的一致性
└── ...               # 可能还有其他支持文件或文档

example: 提供了一个简单的实例，帮助快速了解组件如何集成到小程序项目中。
src: 存放组件的核心代码，对于自定义修改组件行为的开发者尤为重要。
package.json: 关键的配置文件，包含了项目依赖、脚本指令等，是开发和部署的入口点。

项目的启动文件介绍

由于这是一个微信小程序组件库，并非独立运行的应用，因此没有传统意义上的“启动文件”。但是，如果您想要运行示例项目来体验或学习其用法，主要关注的文件是在example目录下的各种配置文件（如.json配置文件）和页面文件。在微信开发者工具中打开这个示例目录即可开始体验。

项目的配置文件介绍

pages.json (示例中的)：虽然不是直接位于wx-drag-img组件库中，但对使用该组件的小程序项目来说，重要的是在页面的json配置文件中正确导入组件，例如添加"usingComponents": {"wx-drag-img": "wx-drag-img"}。
package.json: 这里定义了项目的元数据、依赖项以及npm脚本。开发者可以查看该文件以获取如何通过npm管理组件及其依赖的信息。
gulpfile.js: 若您想进行编译、打包等操作，该文件控制Gulp构建流程，可能用于处理样式、压缩代码等。

安装与基本使用

安装组件：
```
npm i wx-drag-img
```
引入组件：
- 在微信开发者工具中，选择你的小程序项目，然后在需要使用组件的页面json文件加入以下配置：
```
"usingComponents": {
  "wx-drag-img": "wx-drag-img"
}
```
使用组件：在.wxml文件中，你可以这样使用<WxDragImg>：
```
<WxDragImg defaultImgList="{{imgList}}" bind:updateImageList="updateImageList">
  <view slot="upload"></view>
</WxDragImg>
```
不要忘记在对应的.js文件中处理updateImageList事件以更新图片列表。