---
url: /guide/advance/plugin.md
---
# 小程序插件 {#miniprogram-plugin}

插件，是可被添加到小程序内直接使用的功能组件，是对一组 js 接口、自定义组件或页面的封装，。开发者可以像开发小程序一样开发一个插件，供其他小程序使用。同时，小程序开发者可直接在小程序内使用插件，无需重复开发，但是在使用第三那个插件时，无法看到插件的代码。插件适合用来封装自己的功能或服务，提供给第三方小程序进行展示和使用。

开发小程序插件，大致要经过 开通插件功能，填写开发信息，提交审,发布，管理插件使用申请。同时在原生小程序使用插件，要先发出插件申请，等待使用申请通过，插件所有者还可以进行拒绝。
原生小程序开发插件请移步：

* [微信小程序插件开发](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html)
* [支付宝小程序插件开发](https://opendocs.alipay.com/mini/plugin/create-plugin)

新建插件类型的项目后，如果创建示例项目，则项目中将包含三个目录：

* plugin 目录：插件代码目录。
* miniprogram 目录：放置一个小程序，用于调试插件。
* doc 目录：用于放置插件开发文档。

，插件会同时有多个线上版本，由使用插件的小程序决定具体使用的版本号。

### 如何编写一个插件 {#how-to-write-plugin}

推荐使用 mpx 官方脚手架 @mpxjs/cli 创建一个小程序插件项目来快速的进入插件开发阶段，首先全局安装 @mpxjs/cli

```sh
npm i -g @mpxjs/cli
```

然后使用 cli 初始化项目

```sh
mpx create <project-name>
? 请选择小程序项目所属平台（目前仅微信下支持跨平台输出） wx
? 是否需要跨小程序平台 No
? 是否需要使用小程序云开发能力 No
? 是否是个插件项目?（不清楚请选 No ！什么是插件项目请看微信官方文档！） Yes
? 是否需要typescript No
? 项目描述 A mpx project
? 请输入小程序的Appid touristappid
```

**文件目录**

```
  src
  |-- miniprogram // 目录：放置一个小程序，用于调试插件。
  |   --pages
  |   --app.mpx // 引入插件调试
  |-- plugin // 目录：插件代码目录
  |   --components // 插件组件
  |     -- list.mpx // 插件提供的列表组件
  |   --plugin.json // 插件配置文件
```

我们在 plugin/components/list.mpx 中开发插件中的列表组件，开发完成后，在plugin.json中我们向使用者小程序开放的所有自定义组件、页面和 js 接口，格式如下：

**代码示例：**

```html
{
  "publicComponents": {
    "list": "./components/list" // 使用mpx 中的webpack 路径引入规范
  },
  "pages": {
    "hello-page": "./pages/hello-page"
  }
}
```

运行 **npm run build/serve** 构建小程序产物，在 dist 文件夹下，生成最终的小程序插件产物，使用微信开发者工具，打开代码片段菜单栏，选择插件模式，打开 dist 文件夹。

我们可以像小程序一样预览和上传，但插件没有体验版，同时我们通常将 miniprogram 下的代码当做使用插件的小程序代码，来进行插件的调试和测试。

在开发完插件之后，我们可以上传插件代码，在小程序管理后台进行提交发布审核，审核通过后，就可以提供给第三方小程序使用我们的插件了。

使用 mpx 开发插件的优势相似于使用 mpx 开发小程序项目，可以使用 mpx 的各种增强特性以及跨平台输出的特性，提高开发效率和插件性能。