小程序插件总结

# 一、小程序插件功能介绍

插件的开发和使用自小程序基础库版本 1.9.6 开始支持

• 插件是对一组 js 接口、自定义组件或页面的封装，用于嵌入到小程序中使用
• 插件不能独立运行，必须嵌入在其他小程序中才能被用户使用
• 第三方小程序在使用插件时，也无法看到插件的代码。因此，插件适合用来封装自己的功能或服务，提供给第三方小程序进行展示和使用
• 会受到一些限制，如一些 API 无法调用或功能受限。还有个别特殊的接口，虽然插件不能直接调用，但可以使用 插件功能页 来间接实现
• 框架会对小程序和小程序使用的每个插件进行数据安全保护，保证它们之间不能窃取其他任何一方的数据（除非数据被主动传递给另一方）。

插件，是可被添加到小程序内直接使用的功能组件。开发者可以像开发小程序一样开发一个插件，供其他小程序使用。同时，小程序开发者可直接在小程序内使用插件，无需重复开发，为用户提供更丰富的服务

插件可以是

• 提供查询快递信息的服务
• 提供查询天气的服务
• 提供打车（滴滴）的服务 - 可以使用滴滴提供的组件，直接嵌入自己的小程序，实现打车功能）
• 提供外卖（美团外卖）的服务 - 例如每个餐厅需要的小程序风格都不一样，但他都需要外卖功能，那这时就可以给餐厅都定制一个小程序，在外卖部分的功能可以直接使用美团外卖提供的外卖插件（*后面发现插件居然不能微信支付）

除了可以做这些方面还有很多很多，但小程序插件目前限制了开放范围及服务类目（开放类目）

开放范围：企业、媒体、政府及其他组织主体

开发者可选择当前小程序帐号已选类目中的一个，作为插件的服务类目。以下为当前已开放的插件服务类目，将逐步开放更多类目。

开发小程序插件的流程

1. 开通入口：小程序管理后台-小程序插件
2. 开通插件功能 条件：企业、媒体、政府及其他组织主体的小程序，个人小程序不行 个数：一个小程序只能开通一个插件
3. 填写开发信息并开发 限制：填写了小程序插件基本信息和头像就不能修改
4. 提交审核、发布 限制：在开发类目内才能提交 官方文档说“插件发布后才可以被其他小程序搜索并添加”，但实际上不是，没有发布的也可以搜索到和添加

# 二、创建插件项目

小程序的 AppID 可以创建小程序插件项目，插件是独立于小程序之外的，但是 AppID 是公用的，所以不要使用原有的小程序项目进行插件开发。 在创建项目页面，选择一个空文件夹作为项目路径，可以选择创建小程序插件快速启动模板

没有插件appId的，我们需要去申请一个，用来开发插件

• miniprogram 目录：放置一个小程序，用于调试插件。
  • 文件夹是一个普通小程序项目，用来编写小程序插件的使用 Demo，上传插件代码时这个 Demo 会一起上传，并作为小程序插件的发布的审核依据.
• plugin 文件就是小程序插件项目，用来编写小程序插件的代码。
• project.config.json 需要关注 compileType 字段，compileType == 'plugin' 时才能正常的使用插件项目。详情
• doc 目录：插件文档必须放置在插件项目根目录中的 doc 目录下
  • 插件文档的入口文件是 doc/README.md，在 README.md 中引用到的图片资源不能是网络图片，且必须放在这个目录下。
  • 文档中的链接只能链接到
    • 微信开发者社区（developers.weixin.qq.com）
    • 微信公众平台（mp.weixin.qq.com）
    • GitHub（github.com）
  • 编辑 README.md 之后，可以在开发者工具左侧资源管理器的文件栏中右键单击README.md，并选择上传文档。发布上传文档后，文档不会立刻发布。此时可以使用帐号和密码登录 管理后台 ，在 小程序插件 > 基本设置 中预览、发布插件文档
  • 插件文档总大小不能大于 2M，超过时上传将返回错误码 80051

# 2.1 插件目录结构

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

plugin
├── components
│   ├── hello-component.js   // 插件提供的自定义组件文件夹， 中自定义组件可以有多个
│   ├── hello-component.json
│   ├── hello-component.wxml
│   └── hello-component.wxss
├── pages
│   ├── hello-page.js        // 插件提供的页面（可以有多个，自小程序基础库版本 2.1.0 开始支持）
│   ├── hello-page.json
│   ├── hello-page.wxml
│   └── hello-page.wxss
├── index.js                 //  插件入口文件，可以在这里 export 一些 js 接口，供插件使用者使用
└── plugin.json              //  插件的配置文件，主要说明有哪些自定义组件可以供插件外部调用，并标识哪个js文件是插件的js接口文件，默认的配置形式如下：

{
  "publicComponents": {
    "list": "components/list/list"
  },
  "main": "index.js"
}

# 2.2 插件配置文件

提供给使用者小程序使用的自定义组件必须在配置文件的 publicComponents 段中列出

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

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

# 2.3 插件预览、上传和发布

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

在开发版小程序中测试

• 通常情况下，可以将 miniprogram 下的代码当做使用插件的小程序代码，来进行插件的调试和测试
• 但有时，需要将插件的代码放在实际运行的小程序中进行调试、测试。此时，可以使用开发版的小程序直接引用开发版插件。方法如下：

1. 在开发者工具的插件项目中上传插件，此时，在上传成功的通知信息中将包含这次上传获得的插件开发版 ID （一个英文、数字组成的随机字符串）；
2. 点击开发者工具右下角的通知按钮，可以打开通知栏，看到新生成的 ID ；
3. 在需要使用开发版本插件的小程序项目中，将插件 version 设置为 "version": "dev-[开发版 ID]" 的形式，如 "version": "dev-abcdef0123456789abcdef0123456789" 即可。

如果开发版小程序引用了开发版插件，此时这个小程序就不能上传发布了。必须要将插件版本设为正式版本之后，小程序才可以正常上传、发布

注意事项：

• 每次上传插件所生成的 ID 不一定相同，即使是同一个插件和同一个开发者，多次上传也可能会改变 ID；
• 每个开发者在每个插件中只会同时存在一个有效的开发版插件，即只有最新上传的开发版 ID 有效（使用旧的 ID 会提示失效）；
• 同一个插件不同开发者上传的开发版互不影响，可以同时有效；
• 开发版插件没有时间限制，长期有效。

# 三、使用插件

• 添加插件
• 在使用插件前，首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件。开发者可登录小程序管理后台，通过 appid 查找插件并添加。如果插件无需申请，添加后可直接使用；否则需要申请并等待插件开发者通过后，方可在小程序中使用相应的插件。
• 引入插件代码包
  • 使用插件前，使用者要在 app.json 中声明需要使用的插件，例如
    • 在主包中使用插件

        {
          "plugins": {
            "myPlugin": {
              "version": "1.0.0",
              "provider": "wxidxxxxxxxxxxxxxxxx"
            }
          }
        }
      

      @前端进阶之旅: 代码已经复制到剪贴板
      • plugins 定义段中可以包含多个插件声明，每个插件声明以一个使用者自定义的插件引用名作为标识，并指明插件的 appid 和需要使用的版本号。其中，引用名（如上例中的 myPlugin）由使用者自定义，无需和插件开发者保持一致或与开发者协调。在后续的插件使用中，该引用名将被用于表示该插件
    • 在分包内引入插件代码包
      • 如果插件只在一个分包内用到，可以将插件仅放在这个分包内，例如：

          {
            "subpackages": [
              {
                "root": "packageA",
                "pages": [
                  "pages/cat",
                  "pages/dog"
                ],
                "plugins": {
                  "myPlugin": {
                    "version": "1.0.0",
                    "provider": "wxidxxxxxxxxxxxxxxxx"
                  }
                }
              }
            ]
          }
        

        @前端进阶之旅: 代码已经复制到剪贴板
      • 在分包内使用插件有如下限制：
        • 仅能在这个分包内使用该插件
        • 同一个插件不能被多个分包同时引用

使用插件方式

使用插件时，插件的代码对于使用者来说是不可见的。阅读由插件开发者提供的插件开发文档，通过文档来明确插件提供的自定义组件、页面名称及提供的 js 接口规范等。

为插件提供小程序自定义组件

在插件中可以将一部分区域交给使用的小程序来渲染

给插件名为 plugin-index 的页面中的抽象节点 mp-view 指定小程序的自定义组件 components/comp-from-miniprogram 作为实现的话

{
  "myPlugin": {
    "provider": "wxAPPID",
    "version": "1.0.0",
    "genericsImplementation": {
      "plugin-index": {
        "mp-view": "components/comp-from-miniprogram"
      }
    }
  }
}

<!-- miniprogram/page/index.wxml -->
<plugin-view generic:mp-view="comp-from-miniprogram" />

# 四、插件的一些限制

# 4.1 调用 API 的限制

• 插件的请求域名列表与小程序相互独立；
• 一些 API 不允许插件调用（这些函数不存在于 wx 对象下）。
• 有些接口虽然在插件中不能使用，但可以通过插件功能页来达到目的，请参考插件功能页。

小程序插件中不能使用API

# 4.2 使用组件的限制

在插件开发中，以下组件不能在插件页面中使用：

• 开放能力（open-type）为以下之一的 button： contact（打开客服会话） getPhoneNumber（获取用户手机号） getUserInfo（获取用户信息）
• open-data
• web-view 以下组件的使用对基础库版本有要求
• navigator 需要基础库版本 2.1.0
• live-player 和 live-pusher 需要基础库版本 2.3.0

2. 支付功能页