插件开发

创建插件项目

打开小程序IDE，新建项目，选择"小程序插件"，选中"门店插件示例"，然后点"下一步"创建插件项目:插件开发 - 图1

插件项目创建后，基本结构和小程序一致，但是增加了 plugin.json 和 plugin-mock.json 两个文件。

编码实现

主体小程序参数引用声明

在编码开始之前，您可能需要根据插件的业务目标确定插件在运行的时候需要获得主体小程序哪些信息。对于门店插件来说，这个主体小程序为门店小程序，而门店小程序开放了门店名称、门店联系电话和门店所在地址等信息（详见容器参数传递），供插件引用。插件对主体小程序参数的引用需要显式的声明，例如门店插件在运行时如果需要引用门店小程序的名称和地址，需要在 plugin.json 里面进行声明相应参数的 KEY :

  1. {
  2.     "params": [
  3.         "alipay.store.info.name",
  4.         "alipay.store.info.phone"
  5.     ]
  6. }

这些信息一起打包发布到插件市场，在商家订购启用插件的时候，系统显示插件期望获得商家门店对应的信息，商家同意并授权插件才能启用，否则无法启用。

插件在运行时获取主体小程序信息

插件启动时，能够在 App.js 的onLaunch、onShow取到通过小程序 my.navigateToMiniService 传入的数据，主体小程序传递过来的参数放在referrerInfo内:

  1. // 插件 App.js
  2. App({
  3.   onLaunch(options) {
  4.     // 插件的scence的值固定是miniService
  5.     // referrerInfo 为 {data, appId } 结构，其中appId是主体小程序的
  6.     console.log(options.referrerInfo);  
  7.   },
  8.   onShow(options) {    
  9.     console.log(options.referrerInfo);
  10.   },
  11. });

详细技术细节请参考插件相关API。

在模拟器向插件注入主体小程序参数

在开始时，模拟器会实时渲染插件界面。由于这个时候并没有一个主体小程序来唤起这个插件，所以由IDE来充当这个主体小程序通过 plugin-mock.json 来注入这些信息，例如以下设置向运行在模拟器中的插件注入门店名称、电话和地址等信息:

  1. {
  2.  "params": {
  3.     "alipay.store.info.name": "门店插件调试容器",
  4.     "alipay.store.info.phone": "95188"
  5.   }
  6. }

对于插件而言，在模拟器中获取参数和在主体小程序中唤起时获取参数的方式是一样的。在 plugin-mock.json 中更新信息会实时传递到模拟器:插件开发 - 图2

预览插件

注：您在真机预览看到的插件界面也是插件审核人员看到的界面，在发布插件之前请务必保证插件预览是正常工作的

IDE支持插件的真机预览，点左侧真机预览入口，然后在关联应用里面选择相应的插件，选择推送，生成预览二维码，然后用手机扫码进行预览：插件开发 - 图3

扫码即可唤起插件调试容器，其上显示当前预览的插件，点击"立即预览"后，容器唤起插件进行预览，插件声明所需要的参数则由容器传递给插件：插件开发 - 图4

发布插件

点左侧插件发布入口，在关联应用里面选择相应插件，点击上传，插件即上传到开放平台，审核通过插件在插件市场进行发布，然后商家可进行订购和启用：插件开发 - 图5