《小程序插件接入指南》微信开发插件开发文档详解

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

《小程序插件接入指南》微信开发插件开发文档详解

开发插件

开发插件前，请阅读并理解《小程序插件接入指南》，了解激活流程及开放范围，激活插件功能。 如果未激活插件功能，则无法上传插件。

创建插件项目

插件类型的项目可以直接在开发工具中创建。详情

创建新的插件类型项目后，如果创建示例项目，该项目将包含三个目录：

该目录下的内容可以像普通小程序一样编写，用于插件调试、预览和查看。 以下内容主要介绍doc中的插件代码和插件开发文档。

我们提供了完整的插件示例，可以直接在微信开发工具中查看，开发可以与本文进行对比以便更好地理解。 请注意：

由于插件需要appid才能工作，因此请填写appid； 由于当前代码片段的限制，请在打开示例后手动将appid填写到/app.json中（如下所示）以使示例正常运行。

插件目录结构

一个插件可以包含多个自定义组件、页面和一组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                 // 插件的 js 接口
└── plugin.json              // 插件配置文件

插件配置文件

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

代码示例：

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

这个配置文件会打开一个自定义组件 hello-、一个页面 hello-page 以及在 index.js 下导出的所有 js 接口给用户小程序。

进行插件开发

请注意：插件开发时，只能直接调用部分接口； 另外，还可以通过插件功能页面使用一些能力（如获取用户信息、发起支付等）。

自定义组件

一个插件可以定义多个自定义组件，这些自定义组件可以在插件内互相引用。 但是提供给消费者小程序使用的自定义组件必须在配置文件的一部分中列出（见上文）。

除接口限制外，自定义组件的编写和组织方式与通用自定义组件相同。 每个自定义组件由四个文件组成：wxml、wxss、js 和 json。 具体请参考自定义组件的文档。

页

该插件支持小程序基础库版本2.1.0开始的页面。 一个插件可以定义多个插件页面，这些页面可以从这个插件的自定义组件跳转，也可以从其他页面跳转，也可以从用户小程序。 所有页面都必须列在配置文件的页面部分中（见上文）。

除接口限制外，插件页面的编写和组织方式与普通页面相同。 每个页面由四个文件组成：wxml、wxss、js和json。 详细信息请参阅页面上的其他文档。

插件进行页面跳转时可以使用组件。 当插件跳转到自己的页面时，url应该设置为这种形式： -:///PATH/TO/PAGE 。 当需要跳转到其他插件时，也可以这样设置url。

代码示例：

<navigator url="plugin-private://wxidxxxxxxxxxxxxxx/pages/hello-page">
  Go to pages/hello-page!
navigator>

从基础库版本2.2.2开始，在插件自身页面中，插件也可以调用wx. 跳转到该页面。 url 格式与使用组件时类似。

界面

插件可以在接口文件中包含一些js接口（在配置文件中指定小程序开发文档，具体见上文）供插件的使用者调用，如：

代码示例：

module.exports = {
  hello: function() {
    console.log('Hello plugin!')
  }
}

获取小程序导出

在开发工具中预览效果需要在/app.json中手动填写插件AppID

从基础库 2.11.1 开始，插件中有全局函数来获取消费者小程序导出的内容。

例如用户小程序导出如下：

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

然后在插件中，你可以得到这样的内容：

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

或者

引用小程序的自定义组件

在开发工具中预览效果需要在/app.json中手动填写插件AppID

有时，插件可能需要将部分页面或自定义组件交给小程序用于渲染，因此需要能够引用小程序的自定义组件。 但由于插件中无法直接指定小程序自定义组件的路径，因此无法通过方法直接引用。 下面介绍如何通过抽象node()来实现引用。

如果它是一个插件自定义组件（例如-view），那么我们可以通过以下方式声明一个：

// plugin/components/plugin-view.json
{ "componentGenerics": { "mp-view": true } }

并在要显示小程序组件的位置引用它：

<view>小程序组件：view>
<mp-view />

在小程序中引用 -view 时，可以将组件传递给插件进行渲染：

<plugin-view generic:mp-view="comp-from-miniprogram" />

如果是插件页面，插件页面本身就是页面的顶级组件，小程序不会引用它，并且无法通过 :xxx="" 指定抽象节点实现； 因此，从Basic 2.12.2开始，小程序可以在插件的配置中指定插件页面的抽象节点实现。 例如，如果插件页面名为-index，您可以：

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

或者

预览、上传和发布

插件可以像小程序一样预览和上传，但插件没有试用版。

该插件会同时有多个在线版本，具体使用的版本号由使用该插件的小程序决定。

在手机上预览、审核插件时，会使用专门的小程序，应用项目中文件夹下的小程序来预览插件。

在开发版小程序中测试

通常情况下，下面的代码可以看作是使用插件的小程序代码，用于调试和测试插件。

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

将插件上传到开发工具的插件项目中。 此时上传成功的通知消息中会包含本次上传得到的插件开发版本ID（英文和数字的随机字符串）； 点击开发工具右下角的通知按钮，可以打开通知栏，看到新生成的ID； 在需要使用开发版插件的小程序项目中，将插件设置为“”:“dev-[开发版本ID]”的形式，如“”:“dev-”即可。

如果开发版小程序引用了开发版插件，此时小程序无法上传发布。 必须将插件版本设置为正式版本，小程序才能正常上传发布。

防范措施：

插件开发文档

当用户小程序使用插件时，插件代码是不可见的。 因此，除了插件代码外，我们还支持插件开发上传插件开发文档。 本开发文档将展示在插件详情页面，供其他开发在浏览和使用插件时阅读和参考。 插件开发应在插件开发文档中对插件提供的自定义组件、页面、接口等提供必要的描述和说明，以方便用户小程序正确使用插件。

插件开发文档必须放在插件项目根目录下的doc目录下。 目录结构如下：

doc
├── README.md   // 插件文档，应为 markdown 格式
└── picture.jpg // 其他资源文件，仅支持图片

其中.md的写法有一定的限制，具体为：

引用的图片资源不能是在线图片，必须放在该目录下； 文档中的链接只能链接到：

编辑完.md后，您可以在开发工具左侧资源管理器的文件栏中右键单击.md，选择“上传文档”。 发布上传的文档后，该文档不会立即发布。 此时，您可以使用您的账号和密码登录管理后台，在小程序插件 > 基础设置中预览和发布插件文档。

插件文档总大小不能大于2M。 如果超过限制，上传时会返回错误码80051。

其他需要注意的事项：插件之间相互调用

插件不能直接引用其他插件。 但如果小程序引用了多个插件，插件之间是可以互相调用的。

插件调用另一个插件的方式与插件调用自身的方式类似。 您可以使用 -://APPID 访问插件的自定义组件和页面（尚不能使用://）。

对于js接口来说，可以使用，但是不能在文件开头使用，因为依赖的插件可能还没有初始化。 请考虑稍后再调用，例如实际调用接口时或使用组件时。 （这个问题将来会修复。）

插件请求签名

当插件使用 wx. 等API发送网络请求时，会携带额外的签名来验证请求是否来自小程序插件。 该签名位于请求标头中，如下所示：

X-WECHAT-HOSTSIGN: {"noncestr":"NONCESTR", "timestamp":"TIMESTAMP", "signature":"SIGNATURE"}

其中，是一个随机字符串《小程序插件接入指南》微信开发插件开发文档详解， 是生成该随机字符串的UNIX时间戳。 它们是用于计算签名的参数，签名算法为：

SIGNATURE = sha1([APPID, NONCESTR, TIMESTAMP, TOKEN].sort().join(''))

其中，APPID为小程序的AppId（可以从请求头中获取）； TOKEN是插件令牌，可以在小程序插件的基本设置中找到。

网络请求的格式固定为{appid}/{}/page-frame.html，其中{appid}为小程序的appid，{}为小程序的版本号，版本号为0表示开发版、试用版、审核版，版本号表示开发工具，其余为正式版。

插件开发可以按照以下步骤在服务器上验证签名：

sort以字符串的形式表示APPID TOKEN的四个值，并按照字典顺序进行排序（与数组的排序方法相同）； join 直接将四个已排序的字符串连接在一起； 连接结果采用sha1算法，结果为 。

从基础库版本2.0.7开始，小程序运行时，如果网络状况正常，每10分钟就会改变一次。 如果需要，可以判断当前签名是否仍然有效。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等