# 开发小程序插件

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

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

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

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

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

# 如何编写一个插件

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

npm i mpx-cli -g

然后使用 cli 初始化项目

mpx-cli init

我们以开发微信小程序插件为例,弹框会询问是否在当前文件目录下创建项目,选择yes,在问询步骤中选择插件模式(注意跨平台输出选项需要选择否),是否使用 TypeScript,Babel,ESlint,Dll,单元测试这些可根据自身情况选择,同时注意由于插件需要 appid 才能工作,请填入一个 appid;

全部选择完之后,会在当前文件夹生成小程序插件项目

文件目录

  build // mpx 构建文件
  |-- build.js 
  |-- webpack.config.js
  src
  |-- miniprogram // 目录:放置一个小程序,用于调试插件。
  |   --pages
  |   --app.mpx // 引入插件调试
  |-- plugin // 目录:插件代码目录
  |   --components // 插件组件
  |     -- list.mpx // 插件提供的列表组件
  |   --pages // 插件页面
  |     -- hello-page.mpx // 插件提供的页面
  |   --plugin.json // 插件配置文件
  test // 单元测试

然后 npm i 安装项目依赖

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

代码示例:

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

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

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

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

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