手把手系列：小程序插件的开发与引用

在小程序开发中为了提升小程序的功能丰富度和用户体验，以及避免重复造轮子，特别是在实现一些通用功能（如地图定位、支付接口等）时，我们往往需要通过小程序插件来提高开发效率。

目前我司的 app 中是通过嵌入​小程序容器​​​来实现小程序运行的，我们发现该技术平台中是具备直接开发小程序插件的能力的，本期就给大家分享一下如何在第三方平台中开发小程序插件，以便于业务模块可以复用。

首先来科普一下：插件是对一组 js 接口、自定义组件或页面的封装，用于嵌入到小程序中使用。插件不能独立运行，必须嵌入在其他小程序中才能被用户使用；而第三方小程序在使用插件时，也无法看到插件的代码。因此，插件适合用来封装自己的功能或服务，提供给第三方小程序进行展示和使用。

1、创建插件项目

开发者需要在开发者工具中选择创建小程序，并在项目类型中选择「小程序插件」。

当完成插件小程序的创建后，我们可以在项目目录中发现有两个目录与一个文件：

• ​​plugin​​目录：插件代码的目录；

• ​​miniprogram​​目录：放置 FinClip 小程序，用于调试插件；

• ​​fide.project.config.json​​文件：FinClip 项目配置文件；

在 miniprogram 目录中的内容可以当成普通小程序进行编写，用来对插件进行预览、调试与审核。

2、 插件目录结构

通过开发者工具创建了插件类型的小程序，也可以直接通过查看其中的内容进一步了解小程序插件。

一个插件可以包括若干个自定义组件、页面和一组 js 接口。插件的目录内容如下：

plugin├── components│   ├── hello-component.js   // 插件提供的自定义组件（可以有多个）│   ├── hello-component.json│   ├── hello-component.fxml│   └── hello-component.ftss├── pages│   ├── hello-page.js        // 插件提供的页面（可以有多个，自基础库版本 2.1.1 支持）│   ├── hello-page.json│   ├── hello-page.fxml│   └── hello-page.ftss├── index.js                 // 插件的 js 接口└── plugin.json              // 插件配置文件

3、插件配置文件

向使用者小程序开放的所有自定义组件、页面和 js 接口都必须在插件配置文件 ​​plugin.json​​列出，格式如下：

{  "publicComponents": {    "hello-component": "components/hello-component"  },  "pages": {    "hello-page": "pages/hello-page"  },  "main": "index.js"}

这个配置文件将向使用者小程序开放一个自定义组件​​hello-component​​​，一个页面​​hello-page​​​和 ​​index.js​​下导出的所有 js 接口。

4、开发自定义组件

插件可以定义若干个自定义组件，这些自定义组件都可以在插件内相互引用。但提供给使用者小程序使用的自定义组件必须在配置文件的​​publicComponents​​段中列出（参考上文）。

除去接口限制以外，自定义组件的编写和组织方式与一般的自定义组件相同，每个自定义组件由​​fxml​​， ​​ftss​​，​​js​​和​​json​​四个文件组成。具体可以参考 ​​自定义组件的文档​​。

在​​json​​​文件中需要引入自定义组件时，使用​​plugin://​​协议指明插件的引用名和自定义组件名即可，如：

{  "usingComponents": {    "hello-component": "plugin://myPlugin/hello-component"  }}

5、开发页面

插件可以定义若干个插件页面，可以从本插件的自定义组件、其他页面中跳转，或从使用者小程序中跳转。所有页面必须在配置文件的​​pages​​段中列出（参考上文）。

除去接口限制以外，插件的页面编写和组织方式与一般的页面相同，每个页面由​​fxml​​，​​ftss​​，​​js​​和 ​​json​​四个文件组成。

插件执行页面跳转的时候，可以使用 ​​navigator​​​组件。当插件跳转到自身页面时， ​​url​​​应通过​​plugin://​​​前缀设置为这样的形式：​​url="plugin://hello-plugin/hello-page"​​，如：

<navigator id="nav" url="plugin://hello-plugin/hello-page">  Go to Plugin page</navigator>

同样，在插件自身的页面中，插件还可以调用 ​​ft.navigateTo​​​来进行页面跳转，​​url​​​格式与使用 ​​navigator​​组件时相仿。

6、开发接口

插件可以在接口文件（在配置文件中指定，详情见上文）中 export 一些 js 接口，供插件的使用者调用，如：

// plugin/pages/hello-page.jsPage({  data: {},  onLoad() {    console.log('This is a plugin page!')  }})

7、预览插件

插件可以像小程序一样预览和上传，但插件没有体验版。插件会同时有多个线上版本，由使用插件的小程序决定具体使用的版本号。手机预览和提审插件时，会使用一个特殊的小程序来套用项目中 miniprogram 文件夹下的小程序，从而预览插件。

上传、发布插件

开发者如果需要上传自有插件，需要进入「小程序管理-小程序插件」页面，点击其中的「新增插件」按钮，并在其中分别输入插件名称，头像与介绍信息以完成插件新建。

完成插件新建后，点击右侧的「更新插件」，在其中分别录入插件的版本号，更新日志，并上传代码包，就可以完成插件的上传了。