开发小程序插件

优质

小牛编辑

139浏览

2023-12-01

插件，是可被添加到小程序内直接使用的功能组件，是对一组 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 的各种增强特性以及跨平台输出的特性，提高开发效率和插件性能。