微信小程序插件 - 开发教程

昨天（2018.3.13），微信小程序发布了重大功能更新，支持插件的使用和开发，个人预计，不超过 2 个月，优质服务的插件将会如雨后春笋般涌现。

这篇文章，我将会带大家，从 0 开始，学习如何开发和使用插件。文章分为 3 个章节：

1、什么是微信小程序插件
2、如何开发微信小程序插件
3、如何使用第三方微信小程序插件

备注：为了节省文字内容，我会将“微信小程序插件”简称为“插件”。

什么是微信小程序插件？

插件是一组由 js 和自定义组件封装的代码库，插件无法单独使用、也无法预览，必须被其他小程序应用嵌入，才能使用。它和 NPM 的依赖、Maven 的依赖库是一个道理。

不过，插件和 NPM、Maven 依赖管理不同的是：

插件拥有独立的 API 接口和域名列表，不被小程序本身的域名列表限制。（NPM 依赖进来的库不能进行第三方数据请求）
插件必须由腾讯审核通过才能使用（NPM 无需腾讯审核）
使用第三方插件必须向第三方申请（通过 NPM 使用第三方库无需向第三方申请）

所以，我觉得：在未来，插件应该会被第三方打包成为服务，而不仅仅只是一个代码库。

如何开发微信小程序插件？

下载最新的微信小程序开发者工具，（必须是 1.02.1803130 版本以上），打开开发者工具，进入小程序项目，我们会看到“代码片段”标签，如下图：

点击，右下角的 “创建” 按钮，就可以创建插件了，如下图：

插件的 AppId 和之前的微信小程序的 AppId 是同个道理，需要在微信开发者后台新建一个微信小程序插件：

微信小程序插件的名称也必须是独一无二的，申请完毕后就可以获得插件的 AppId 了。

填写名称和插件 AppID 后，进入小程序项目，如下图显示：

项目的代码目录结构如下：

├── miniprogram
│ ├── app.js
│ ├── app.json
│ └── pages
├── plugin
│ ├── api
│ ├── components
│ ├── index.js
│ └── plugin.json
└── project.config.json

在文件 project.config.json 中，我们看到代码如下：

{
    "miniprogramRoot": "./miniprogram",
    "pluginRoot": "./plugin",
    "compileType": "plugin",
    "setting": {
        "newFeature": true
    },
    "appid": ".....",
    "projectname": "videoPlayer",
    "condition": {}
}

miniprogramRoot：配置小程序的根目录，可以使用小程序来测试编写的插件
pluginRoot：插件相关代码所在的根目录
compileType：项目的编译类型，必须配置为 plugin，在上传代码的时候才会以插件的方式上传到腾讯服务器。

在 plugin/plugin.json 文件中，代码如下：

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

publicComponents：配置的是插件可以给使用的小程序提供哪些组件，一个插件可以定义很多个组件，组件和组件之间相互引用，但是小程序只能使用在 publicComponents 里配置的组件。
main：定义入口文件，在入口文件 index.js 中定义小程序可以使用插件的那些接口。

在 plugin/index.js 文件中，代码如下：

var data = require('./api/data.js')

module.exports = {
  getData: data.getData,
  setData: data.setData
}

在 plugin/index.js 定义了对外抛出接口为 getData 和 setData，小程序在使用这个插件的时候，只能使用到插件提供的这两个接口，插件的其他接口（或方法）小程序无法使用。

做好以上配置后，就可以开始在 plugin/components 编写组件代码了，例如我写了我的播放器组件，代码如下：

player.js：

Component({
  data: {
    myData:[]
  }
})

player.wxml:

<view class="section tc">
  <video id="myVideo" src="..."  enable-danmu danmu-btn controls>
  </video>
</view>

值得注意的是：

编写组件是调用 Component() 定义组件代码，和 App() 、Page()一样的道理。
在组件能够调用的微信 API 受限，比如说不能调用 wx.login() 获取用户信息，具体限制在：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/plugin/api-limit.html

代码编写完毕后，注意在 plugin/plugin.json 文件配置：

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

表示使用该插件的小程序，可以使用 hgPlayer 这个组件，组件 hgPlayer 对应的代码是 "components/player/player"

配置好后，我就可以上传插件代码到腾讯服务器，进入微信小程序开发者后台提交审核，腾讯审核通过后，第三方小程序就可以使用我们编写的这个插件了。

如何使用第三方插件

使用第三方插件之前，需要进入微信小程序开发者后台，在第三方服务里添加插件：

填写第三方插件的 AppId，点击添加按钮，对方账号的 小程序插件 > 申请管理 会出现你的申请，如下图：

需要第三方同意你的申请后，你就可以开始使用第三方插件了。

使用第三方插件的时候，需要在我们自己的小程序的 app.json 做如下配置：

{
  "pages": [
    "pages/index/index"
  ],
  "plugins": {
    "myPlugin": {
      "version": "dev",
      "provider": "填写申请通过的插件AppId"
    }，
    "plugin1": {
      "version": "dev",
      "provider": "填写申请通过的插件AppId"
    },
     "plugin2": {
      "version": "dev",
      "provider": "填写申请通过的插件AppId"
    }
    ...
  }
}

plugins：配置的要使用的第三方插件列表。

插件列表配置好后，由于每个插件可能会有多个组件，所以需要我们在每个页面定义要使用到的组件，例如，在 index.js 中要使用 hgPlayer 这个组件，需要在 index.json 配置如下：

{
  "usingComponents": {
    "player": "plugin://myPlugin/hgPlayer"
  }
}

"player": "plugin://myPlugin/hgPlayer" 的含义是：要本页面使用插件 myPlugin 的组件 hgPlayer，同时在本页面的别名为：player 。

配置好 index.json 后，就可以在 index.wxml 直接使用了，例如：

1
2
3

<view class="xxxx">
    <player />
</view>

后续

到目前为止，我们已经讲完了：

1、什么是微信小程序插件
2、如何开发微信小程序插件
3、如何使用第三方微信小程序插件