# Using plugins

# Add plugin

Before using plug-ins, first of all in the Mini Program management background "settings - third-party services - plug-in management" to add plug-ins. Developers can log into the Mini Program management background, through the appid Find the plugin and add it. If the plug-in does not need to apply, it can be used directly after adding it.Otherwise, you need to apply and wait for the plug-in developer to pass before you can use the corresponding plug-in in the Mini Program.

# Introducing the Plugin Code Package

Before using the plugin, the user must app.json Declare the plug-ins you need to use in the

Code example:

{
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",
      "provider": "wxidxxxxxxx" 
    }
  }
}

As shown in the above example, plugins The definition segment can contain multiple plug-in declarations, each of which is identified by a user-defined plug-in reference name and specifies the appid And the version number that needs to be used. Where the reference name (in the example above myPlugin) is customizable by the user, without the need to align with or coordinate with the plugin developer. In subsequent plug-in use, the reference name is used to represent the plug-in.

# Introducing plug-in code packages within sub-packages

If a plug-in is only used in one subcontract, you can place the plug-in only in that subcontract, for example:

{
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ],
      "plugins": {
        "myPlugin": {
          "version": "1.0.0",
          "provider": "wxidxxxxxxx" 
        }
      }
    }
  ]
}

The use of plug-ins within the subcontract has the following restrictions:

• By default, the plug-in can only be used within this subcontract, except through the Subcontract asynchrony Make asynchronous cross-subcontract references
• The same plug-in cannot be referenced by multiple subcontractors at the same time
• If the base library version is less than 2.9.0 , you cannot jump directly from a page outside the subcontract to a plugin page inside the subcontract. You need to jump first to a non-plugin page inside the subcontract and then to a plugin page inside the same subcontract.

# Using plugins

When using a plug-in, the code of the plug-in is not visible to the user. In order to use the plug-in correctly, users should check the "Development Documentation" section of the plug-in details page, read the plug-in development documentation provided by the plug-in developer, and clarify the custom components, page names, and provided by the plug-in. js Interface specifications, etc.

# Custom Components

Use the custom components provided by the plug-in, and Use ordinary custom components In the same way. in json File to define the custom components that need to be introduced, use the plugin:// The protocol specifies the plug-in's reference name and the custom component name, such as:

Code example:

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

For the protection of plug-ins, the custom components provided by plug-ins are limited in their use:

• By default, Mini Programs and other plugins are this.selectComponent Interface cannot obtain a custom component instance object for a plug-in, and the same this.selectComponent Also do not have access to Mini Programs and other plugins for the
  • This limitation can be achieved by Custom Component Instances Get Results To remove the
• wx.createSelectorQuery Equal interface >>> The selector cannot be selected inside the plug-in.

# page

The plugin's page Mini Program base library version 2.1.0 Start supporting.

When you need to jump to the plugin page,url use plugin:// The prefix, in the form of plugin://PLUGIN_NAME/PLUGIN_PAGE， Such as:

Code example:

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

# js interface

Using the plug-in's js Interface, you can use the requirePlugin Method. For example, the plug-in provides a file named hello Method and a method called world Variable, you can call it like this:

var myPluginInterface = requirePlugin('myPlugin')

myPluginInterface.hello()
var myWorld = myPluginInterface.world

Base library 2.14.0 Up, can also be accessed through the plug-in's AppID To get the interface, such as:

var myPluginInterface = requirePlugin('wxidxxxxxxxx' )

# Export to Plugins

{% Minicode ('GbXmMLml7vjC') %}, need to be filled out manually miniprogram/app.json Plugins in AppID

From the base library 2.11.1 Since then, a Mini Program using plug-ins can export some content for plug-ins to obtain. Specifically, when declaring the use of plug-ins, you can do so by export Field to specify a file, such as:

{
  "myPlugin": {
    "version": "1.0.0",
    "provider": "wxidxxxxxxx," 
    "export": "index.js"
  }
}

The file (in the example above) index.js) The exported content can be accessed by the plug-in using global functions. For example, in the above file, the Mini Program using the plugin does the following export:

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

Then the plugin can get the above exported content:

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

Specific export content, you can read the plug-in development documentation, and plug-in developers to make a good agreement.

This feature can also be used when the plug-in is subcontracted, but the path to the specified file is relative to the subcontracted. For example in root: packageA Specified in the subcontract of the export: exports/plugin.js, then the specified file on the file system should be /packageA/exports/plugin.js。

The export of multiple plug-ins does not affect each other, and the two plug-ins can export the same file or different files. But when exporting the same file, please note that if one plugin makes changes to the exported content, the other plugin will also be affected.

Please export carefully wx Object or a specific wx API, which will enable the plug-in to call as a user Mini Programs API。

It's also possible [Refer to the related documentation for the development plug-in](./development.md#Get Mini Program Export)

# Provide custom components for plug-ins

{% Minicode ('QRRovLmu7Xjm') %}, need to be filled out manually miniprogram/app.json Plugins in AppID

Sometimes, a plug-in may hand over a portion of a page or custom component to a used Mini Program for rendering, so the used Mini Program needs to provide a custom component. However, because you cannot specify a custom component path for the Mini Program directly in the plug-in, you need to specify a custom component path for the Mini Program by specifying Abstract nodes (generics) Way to provide.

If it is a custom component of a plug-in that needs to specify an abstract node implementation, it can be specified at reference time:

<!-- miniprogram/Page/index.wxml -->
<plugin-view generic:mp-view="comp-from-miniprogram" />

From the base library 2.12.2 You can specify an abstract component implementation for a plug-in page through a configuration item. For example, to give the plug-in name plugin-index Abstract nodes in the page of the mp-view Specify a custom component of the Mini Program components/comp-from-miniprogram As the realization of the words:

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

It's also possible [Refer to the related documentation for the development plug-in](./development.md#Refer to the custom component of the Mini Program)