How to develop and introduce applet plug-ins

Generally speaking, each applet open platform has certain restrictions on the open scope of plug-in development , For example, wechat applet platform is open 22 Industry related plug-in development , Among them, medical services 、 The financial sector 、 recreational 、 There are further special restrictions in social and other industries .

After understanding the development specifications of applet plug-ins , How to start the development of applet plug-ins in the right way ？ In fact, all major platforms have responded with development tools and development guidelines .

We also take WeChat and Alipay as an example. , Using WeChat developer tools and Alipay IDE The tool can efficiently complete the creation and development of a small program plug-in , Specific development guidelines are available at ：

Wechat applet plug-in development ：

https://developers.weixin.qq.com/miniprogram/dev/devtools/plugin.html

Alipay small program plug-in development ：

https://opendocs.alipay.com/mini/plugin/plugin-development

1、 Applet plug-ins are introduced

For more users, we may need to introduce plug-ins , How to introduce plug-ins into applets ？ Here we have FinClip  Small program as an example to practice .

The developer can introduce the declaration of plug-in code into the applet code , And then use  FIDE  When the development tool compiles , FIDE  The plug-in code will be obtained from the server and packaged and compiled together .

Please note that

The plug-in function needs to be in the basic library version ≥2.11.1,SDK edition ≥2.34.0 Can only be used in the environment of

2  Add the plug-in

Before using the plug-in , Developers can log in 「 Small program open platform - Applet management - Widget plugin 」, Through plug-ins  ID  Find plug-ins and add .

3  Introduce plug-in code package

Before using plug-ins , Users should be in  app.json  The plug-in to be used is declared in , for example ：

Code example

{
 "plugins": {
 "myPlugin": {
 "version": "1.0.0",
 "provider": " plug-in unit  id"
 }
 }
}

As shown in the example above , plugins  The definition section can contain multiple plug-in declarations , Each plug-in declaration is identified by a user-defined plug-in reference name , And indicate the name of the plug-in  ID  And the version number you need to use .

among , Reference name （ In the example above  myPlugin） User defined , There is no need to align or coordinate with plug-in developers . In the subsequent use of plug-ins , The reference name will be used to represent the plug-in .

4 Introduce plug-in code package into subcontracting

If the plug-in is only used in one subcontract , Plug ins can be placed only in this Subcontract , for example ：

{
 "subpackages": [
 {
 "root": "packageA",
 "pages": [
 "pages/cat",
 "pages/dog"
 ],
 "plugins": {
 "myPlugin": {
 "version": "1.0.0",
 "provider": " plug-in unit  id"
 }
 }
 }
 ]
}

There are the following restrictions on the use of plug-ins in subcontracting ：

• The plug-in can only be used within this Subcontract ;

• The same plug-in cannot be referenced by multiple subcontractors at the same time ;

5 The use of plug-in

When using plug-ins , The code of the plug-in is invisible to the user . In order to use the plug-in correctly , Users should view the in the plug-in details page “ Developing documents ” section , Read the plug-in development documentation provided by the plug-in Developer , Define the custom components provided by the plug-in through documentation 、 Page name and provided  js  Interface specification, etc .

6 Custom components

Use the custom components provided by the plug-in , and   Use common custom components   In a similar way . stay  json  When defining custom components to be imported in the file , Use  plugin://  The protocol indicates the reference name of the plug-in and the name of the custom component , for example ：

Code example

{
 "usingComponents": {
 "hello-component": "plugin://myPlugin/hello-component"
 }
}

For the protection of plug-ins , There are certain restrictions on the use of custom components provided by plug-ins ：

• By default , On the page  this.selectComponent  The interface cannot get the custom component instance object of the plug-in ;

• ft.createSelectorQuery  And so on  >>>  The selector cannot be selected inside the plug-in .

7 page

When you need to jump to the plug-in page ,url  Use  plugin://  Prefix , Form like  

plugin://PLUGIN_NAME/PLUGIN_PAGE,

  Such as ：

Code example

<navigator url=&quot;plugin://myPlugin/hello-page&quot;>
 Go to pages/hello-page!
</navigator>

8 js  Interface

Using plug-ins  js  Interface , have access to  requirePlugin  Method . for example , The plug-in provides a  hello  And a method called  world  The variable of , You can call... As follows ：

var myPluginInterface = requirePlugin('myPlugin');

myPluginInterface.hello();
var myWorld = myPluginInterface.world;

You can also use the plug-in  id  To get the interface , Such as ：

var myPluginInterface = requirePlugin(' plug-in unit  id');

9 Export to plug-in

Applets using plug-ins can export some content , For plug-ins to get . say concretely , When declaring the use of plug-ins , Can pass  export  Field to specify a file , Such as ：

{
 "myPlugin": {
 "version": "1.0.0",
 "provider": " plug-in unit  id",
 "export": "index.js"
 }
}

Then the document （ In the above example is  index.js） The exported content can be obtained by the plug-in with global functions . for example , In the file above , The applet using the plug-in is exported as follows ：

// index.js
module.exports = { whoami: 'MiniProgram' }

Then the plug-in can get the content exported above ：

// plugin
requireMiniProgram().whoami // 'MiniProgram'

What to export , You can read the plug-in development documentation , Make an agreement with the developer of the plug-in .

When the plug-in is subcontracted , This feature can also be used , However, the path of the specified file is relative to the subcontracting . For example, in  root: packageA  ... is specified in your subcontract  export: exports/plugin.js, Then the specified file on the file system should be  /packageA/exports/plugin.js.

The export of multiple plug-ins used does not affect each other , Two plug-ins can export the same file , It can also be different files . But when exporting the same file , If a plug-in modifies the exported content , Then another plug-in will also be affected , Please pay attention to this .

10 Provide custom components for plug-ins

Sometimes , The plug-in may be on the page or in a custom component , Give part of the area to the applet used to render , Therefore, the applet you need to use provides a custom component . However, the plug-in cannot directly specify the custom component path of the applet , Therefore, you need to specify   Abstract node （generics）  To provide .

If it is a custom component of a plug-in, you need to specify an abstract node implementation , You can specify... When referencing ：

<!-- miniprogram/page/index.fxml -->
<plugin-view generic:mp-view=&quot;comp-from-miniprogram&quot; />

The page abstraction item can be specified by the plug-in . for example , To name the plug-in  plugin-index  Abstract nodes in the page of  mp-view  Specifies the custom component of the applet  components/comp-from-miniprogram  As an implementation ：

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

Congratulations, you have successfully completed the development or application introduction of a plug-in , You can provide richer services for users through applet plug-ins .

Just opened from open source China to a good small program plug-in development activity , Also happens to be

FinClip

Host , This competition is very meaningful to make up for the ecosystem of applet plug-ins , And there are 10 Ten thousand yuan prize pool , Interested partners can try ～