手把手系列:小程序插件的开发与引用
在小程序开发中为了提升小程序的功能丰富度和用户体验,以及避免重复造轮子,特别是在实现一些通用功能(如地图定位、支付接口等)时,我们往往需要通过小程序插件来提高开发效率。
目前我司的 app 中是通过嵌入小程序容器来实现小程序运行的,我们发现该技术平台中是具备直接开发小程序插件的能力的,本期就给大家分享一下如何在第三方平台中开发小程序插件,以便于业务模块可以复用。
首先来科普一下:插件是对一组 js 接口、自定义组件或页面的封装,用于嵌入到小程序中使用。插件不能独立运行,必须嵌入在其他小程序中才能被用户使用;而第三方小程序在使用插件时,也无法看到插件的代码。因此,插件适合用来封装自己的功能或服务,提供给第三方小程序进行展示和使用。
1、创建插件项目
开发者需要在开发者工具中选择创建小程序,并在项目类型中选择「小程序插件」。
![](https://static001.geekbang.org/infoq/65/65f5e762558c88a9cbf12783e92220d0.png)
当完成插件小程序的创建后,我们可以在项目目录中发现有两个目录与一个文件:
plugin
目录:插件代码的目录;
miniprogram
目录:放置 FinClip 小程序,用于调试插件;
fide.project.config.json
文件:FinClip 项目配置文件;
在 miniprogram 目录中的内容可以当成普通小程序进行编写,用来对插件进行预览、调试与审核。
2、 插件目录结构
通过开发者工具创建了插件类型的小程序,也可以直接通过查看其中的内容进一步了解小程序插件。
![](https://static001.geekbang.org/infoq/3a/3a1b93027fdda8939d84b7a3489d4b1f.png)
一个插件可以包括若干个自定义组件、页面和一组 js 接口。插件的目录内容如下:
3、插件配置文件
向使用者小程序开放的所有自定义组件、页面和 js 接口都必须在插件配置文件 plugin.json
列出,格式如下:
这个配置文件将向使用者小程序开放一个自定义组件hello-component
,一个页面hello-page
和 index.js
下导出的所有 js 接口。
4、开发自定义组件
插件可以定义若干个自定义组件,这些自定义组件都可以在插件内相互引用。但提供给使用者小程序使用的自定义组件必须在配置文件的publicComponents
段中列出(参考上文)。
除去接口限制以外,自定义组件的编写和组织方式与一般的自定义组件相同,每个自定义组件由fxml
, ftss
,js
和json
四个文件组成。具体可以参考 自定义组件的文档。
在json
文件中需要引入自定义组件时,使用plugin://
协议指明插件的引用名和自定义组件名即可,如:
5、开发页面
插件可以定义若干个插件页面,可以从本插件的自定义组件、其他页面中跳转,或从使用者小程序中跳转。所有页面必须在配置文件的pages
段中列出(参考上文)。
除去接口限制以外,插件的页面编写和组织方式与一般的页面相同,每个页面由fxml
,ftss
,js
和 json
四个文件组成。
插件执行页面跳转的时候,可以使用 navigator
组件。当插件跳转到自身页面时, url
应通过plugin://
前缀设置为这样的形式:url="plugin://hello-plugin/hello-page"
,如:
同样,在插件自身的页面中,插件还可以调用 ft.navigateTo
来进行页面跳转,url
格式与使用 navigator
组件时相仿。
6、开发接口
插件可以在接口文件(在配置文件中指定,详情见上文)中 export 一些 js 接口,供插件的使用者调用,如:
7、预览插件
插件可以像小程序一样预览和上传,但插件没有体验版。插件会同时有多个线上版本,由使用插件的小程序决定具体使用的版本号。手机预览和提审插件时,会使用一个特殊的小程序来套用项目中 miniprogram 文件夹下的小程序,从而预览插件。
上传、发布插件
开发者如果需要上传自有插件,需要进入「小程序管理-小程序插件」页面,点击其中的「新增插件」按钮,并在其中分别输入插件名称,头像与介绍信息以完成插件新建。
完成插件新建后,点击右侧的「更新插件」,在其中分别录入插件的版本号,更新日志,并上传代码包,就可以完成插件的上传了。
评论