《十七》微信小程序中的插件

花铛

已于 2024-02-09 09:21:40 修改

阅读量1.1w

点赞数 3

分类专栏：微信小程序文章标签：微信小程序

于 2020-12-30 11:49:34 首次发布

本文链接：https://blog.csdn.net/wsln_123456/article/details/111949677

版权

微信小程序专栏收录该内容

35 篇文章 8 订阅

订阅专栏

插件是对一组 js 接口、自定义组件或页面的封装，用于嵌入到小程序中使用。

插件不能独立运行，必须嵌入在其他小程序中才能被用户使用；而第三方小程序在使用插件时，也无法看到插件的代码。因此，插件适合用来封装自己的功能或服务，提供给第三方小程序进行展示和使用。

相对于普通 js 文件或自定义组件，插件拥有更强的独立性，拥有独立的 API 接口、域名列表等，但同时会受到一些限制，如一些 API 无法调用或功能受限。还有个别特殊的接口，虽然插件不能直接调用，但可以使用插件功能页来间接实现。
框架会对小程序和小程序使用的每个插件进行数据安全保护，保证它们之间不能窃取其他任何一方的数据（除非数据被主动传递给另一方）。

开发插件：

插件开发者可以像开发小程序一样编写一个插件并上传代码，在插件发布之后，其他小程序方可调用。小程序平台会托管插件代码，其他小程序调用时，上传的插件代码会随小程序一起下载运行。

开发流程：

开通插件功能：小程序开发者无需重新注册帐号，可直接在小程序管理后台开通插件功能，完成基本信息填写后完成开通。
填写开发信息并完成开发：设置插件的服务器域名及Token信息后，即可在开发者工具中开发插件。
完善基本信息：插件在提交审核前，请确认已设置插件名称、插件头像、插件简介等信息，并已上传插件开发文档，便于开发者接入插件。
预览、上传和发布。

插件可以像小程序一样预览和上传，但插件没有体验版。
插件会同时有多个线上版本，由使用插件的小程序决定具体使用的版本号。

创建插件项目：

插件类型的项目可以在开发者工具中直接创建。新建插件类型的项目后，项目中将包含三个目录：

plugin 目录：插件代码目录。
miniprogram 目录：放置一个小程序，用于调试插件。

miniprogram 目录内容可以当成普通小程序来编写，用于插件调试、预览和审核。
doc 目录：用于放置插件开发文档。

插件目录结构：

一个插件可以包含若干个自定义组件、页面，和一组 js 接口。

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

在这里插入图片描述

开发插件：

在插件开发中，只有部分接口可以直接调用；另外还有部分能力可以通过插件功能页的方式使用。

自定义组件：插件可以定义若干个自定义组件，这些自定义组件都可以在插件内相互引用。但提供给使用者小程序使用的自定义组件必须在配置文件的 publicComponents 段中列出。
页面：插件可以定义若干个插件页面，可以从本插件的自定义组件、其他页面中跳转，或从使用者小程序中跳转。所有页面必须在配置文件的 pages 段中列出。

插件执行页面跳转的时候，url 应设置为这样的形式：plugin-private://PLUGIN_APPID/PATH/TO/PAGE 。
```
<navigator url="plugin-private://wxidxxxxxxxxxxxxxx/pages/hello-page">
  Go to pages/hello-page!
</navigator>
```
插件可以在接口文件中 export 一些 js 接口，供插件的使用者调用。
```
module.exports = {
  hello: function() {
    console.log('Hello plugin!')
  }
}
```

获取小程序导出：在插件中有全局函数 requireMiniProgram，可以获取由使用者小程序导出的内容。

// 使用者小程序
module.exports = {
  greeting() {
    return 'Greetings from Weixin MiniProgram!';
  }
}

// 插件
const miniProgramExports = requireMiniProgram();
miniProgramExports.greeting(); // 'Greetings from Weixin MiniProgram!'

引用小程序的自定义组件：
插件开发文档：插件开发文档必须放置在插件项目根目录中的 doc 目录下。

编辑 README.md 之后，可以在开发者工具左侧资源管理器的文件栏中右键单击 README.md，并选择上传文档。发布上传文档后，文档不会立刻发布。此时可以登录管理后台，预览、发布插件文档。
插件文档总大小不能大于 2M，超过时上传将返回错误码 80051。

测试插件：

通常情况下，可以将 miniprogram 下的代码当做使用插件的小程序代码，来进行插件的调试和测试。

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

在开发者工具的插件项目中上传插件，此时，在上传成功的通知信息中将包含这次上传获得的插件开发版 ID （一个英文、数字组成的随机字符串）；
在使用这个插件的任意小程序项目中，可以将插件 version 设置为 "version": "dev-[开发版 ID]" 的形式，如 "version": "dev-abcdef0123456789abcdef0123456789" ，这样就会引用到这次上传的开发版插件；

使用插件：

添加插件：在使用插件前，需要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件。

开发者可登陆小程序管理后台，通过appid查找插件并添加。
如果插件无需申请，添加后可直接使用；否则需要申请并等待插件开发者通过后，方可在小程序中使用相应的插件。
引入插件代码包：使用插件前，使用者要在app.json中声明使用的插件。

plugins定义段中可以包含多个插件声明，每个插件声明以一个使用者自定义的插件引用名作为标识，并指明插件的appid和需要使用的版本号。
引用名由使用者自定义，无需和插件开发者保持一致或与开发者协调。在后续的插件使用中，该名称将被用于表示该插件。
```
{
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",
      "provider": "wxidxxxxxxxxxxxxxxxx"
    }
  }
}
```
如果插件只在一个分包内用到，可以将插件仅放在这个分包内。
在分包内使用插件由如下限制：
1. 仅能在这个分包内使用该插件；
2. 同一个插件不能被多个分包同时引用；
3. 如果基础库版本低于2.9.0，不能从分包外的页面直接跳入分包内的插件页面，需要先跳入分包内的非插件页面，再跳入同一分包内的插件页面。
```
{
 "subpackages": [
   {
     "root": "packageA",
     "pages": [
       "pages/cat",
       "pages/dog"
     ],
     "plugins": {
       "myPlugin": {
         "version": "1.0.0",
         "provider": "wxidxxxxxxxxxxxxxxxx"
       }
     }
   }
 ]
```
使用插件：使用插件时，插件的代码对于使用者来说是不可见的。为了正确使用插件，使用者应查看插件详情页面的“开发文档”一节，阅读由插件开发者提供的插件开发文档，通过文档来明确插件提供的自定义组件、页面名称及提供的js借口规范等。
1. 自定义组件：使用插件提供的自定义组件，和使用普通自定义组件的方式相仿。在json文件定义需要引入的自定义组件时，使用，使用plugin://协议指明插件的引用名和自定义组件名。
  
  出于对插件的保护，插件提供的自定义组件在使用上有一些限制：默认情况下，页面中的this.selectcomponent接口无法获得插件的自定义组件实例对象；wx.createSelectorQuery等接口的深度选择器无法选入插件内部。
```
{
  "usingComponents": {
    "hello-component": "plugin://myPlugin/hello-component"
  }
}
```
2. 页面：插件的页面从小程序基础库版本2.1.0开始支持。需要跳转到插件页面时，url使用plugin://前缀。
```
<navigator url="plugin://myPlugin/hello-page">Go to pages/hello-page!</navigator>
```
3. js接口：使用插件的js接口时，可以使用requirePlugin方法。
```
var myPluginInterface = requirePlugin('myPlugin');

myPluginInterface.hello();
var myWorld = myPluginInterface.world;
```
导出到插件：从基础库2.1.1起，使用插件的小程序可以导出一些内容，供插件获取。

使用的多个插件的导出互不影响，两个插件可以导出同一个文件，也可以是不同的文件。
但如果导出同一个文件，如果一个插件对导出内容做了修改，那么另一个插件也会被影响。

具体来说，在声明使用插件插件时，可以通过export字段来指定一个文件。
```
{
  "myPlugin": {
    "version": "1.0.0",
    "provider": "wxidxxxxxxxxxxxxxxxx",
    // 该文件导出的内容可以被这个插件用全局函数获取到
    "export": "index.js"
  }
}
```
使用插件的小程序在Index.js文件中做了如下导出：
```
// index.js
module.exports = { whoami: 'Wechat MiniProgram' }
```
那么插件就可以获得上面导出的内容：
```
// plugin
requireMiniProgram().whoami // 'Wechat MiniProgram'
```
当插件在分包中时，这个特性也可以使用，但指定的文件路径是相对于分包的（例如：在root:packageA的分包中指定了export:exports/plugin.js，那么被指定的文件在文件系统上应该是/packageA/exports/plugin.js）。
为插件提供自定义组件：有时，插件可能会在页面或者自定义组件中，将一部分区域交给使用的小程序来渲染，因此需要使用的小程序提供一个自定义组件。但由于插件中不能直接指定小程序的自定义组件路径，因此需要通过为插件指定抽象节点的方式来提供。
如果是插件的自定义组件需要抽象节点实现，可以在引用时指定：
```

<plugin-view generic:mp-view="comp-from-miniprogram" />
```
从基础库2.12.2起，可以通过配置项为插件页面指定抽象组件实现。
```
// 例如：要给插件名为plugin-index的页面中的抽象节点mp-view指定小程序的自定义组件component/comp-from-miniprogram
{
  "myPlugin": {
    "provider": "wxAPPID",
    "version": "1.0.0",
    "genericsImplementation": {
      "plugin-index": {
        "mp-view": "components/comp-from-miniprogram"
      }
    }
  }
}
```