微信小程序插件开发

小程序插件

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

本文以支付插件为例，教你从0开发一个属于自己的插件。

开发前准备

1. 申请开通插件功能

开通入口： 小程序管理后台 -> 功能 -> 小程序插件

填写插件基本信息

2. 设置插件基本信息

基本设置页面

另外需要注意，我们开发的是支付插件，所以在基本设置的地方，我们要申请开通支付能力。

申请开通支付能力审核略严格，做好被拒的准备，修改措辞继续申请，总会过的。

开发插件

1. 创建插件项目

用维信开发者工具创建一个新项目，开发模式选择插件。宿主AppId就是你的小程序的AppID，可在小程序管理后台 -> 设置 -> 基本设置 -> 账号信息中查看，也可以在你的小程序项目中的project.config.json中查看。插件AppId与宿主AppId一致（这里官方文档写的很迷惑，其实填一样的就行）

插件项目创建好后，项目中包含三个目录：

• plugin 目录：插件代码目录。
• miniprogram 目录：放置一个小程序，用于调试插件。（仅可用于调试）
• doc 目录：用于放置插件开发文档。

2. 配置插件配置文件

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

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

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

3. 插件开发

在插件开发中，只有 部分接口 可以直接调用；另外还有部分能力（如 获取用户信息 和 发起支付 等）可以通过 插件功能页 的方式使用。我们的支付功能就要配合插件功能页。

3.1 插件项目代码

1. 在plugin目录下，修改plugin.json中声明：

{
   
    "publicComponents": {
   
        "zl-pay": "components/pay/index"
    },
    "main": "index.js"
}

2. components文件夹下新增pay文件夹，在该文件夹下创建index.js, index.json, index.wxml, index.wxss四个文件。

// index.wxml
<view class="g-box">
  <view class</