# Use a plug-in

# Add a plugin

Before using plug-ins, first of all, add plug-ins in the "Mini Program information settings page - third-party settings - plug-in management" of the Weixin Mini Program management background home page.Developers can log into the Mini Program management background, find plugins and add them through AppID.If the plug-in does not require an application, it can be used directly after being added; Otherwise, you need to apply and wait for the plug-in developer to pass before you can use the corresponding plug-in in your Mini Program.

# Introduce plug-in code packages

Before using a plug-in, the user declares the plug-in to be used inapagejson, for example:

Code example:

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

As shown in the above example, thepluginsdefinition paragraph can contain multiple plug-in declarations, each identified by a user-custom plug-in reference name and indicating the plug-in's AppID and the version number to be used.Where the reference name (in the example above,myPlugin) is defined by the user and does not need to align or coordinate with the plugin developer.In subsequent plug-in usage, the reference name will be used to represent the plug-in.

# Bring in plug-in code packages within subpackages

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

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

There are restrictions on the use of plug-ins within subpackages:

• By default, the plug-in can only be used within this subcontract, unless asynchronous cross-subcontract references are made by subcontract asynchronization ;
• The same plug-in cannot be cited by multiple sub-packages at the same time;
• If the base library version is below 2.9.0, you cannot jump directly from a page outside of the subpackage to a plug-in page inside the subpackage, and you need to first jump to a non-plug-in page in the subpackage and then to a plugin page in the same subpackage.

# Use a plug-in

When using a plug-in, the plug-in code is not visible to the user. In order to properly use a plug-in, users should check the "Development Documentation" section in the plug-in details page, read the plug-ins development documentation provided by the plug-int developer, and use the document to clarify the custom components provided by plug-ins, page names, and specifications for the Javascript interface provided.

# Custom components

Use custom components provided by plug-ins in much the same way use a normal custom component .When thejsonfile defines the custom components that need to be introduced, use theplugin: / /protocol to specify the plug-in reference name and custom component name, such as:

Code example:

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

In order to protect the plug-in, the custom components provided by the plug-ins are limited in their use:

• By default, Weixin Mini Program and other plug-insthis.selectComponentinterfaces cannot obtain custom component instance objects for plug-ins, nor can thethis.selectComponent]]Mini Programs and other plug-ins be obtained;
  • This limitation can be removed by custom component instances to get results
• The> > >selector for an interface such as wx.createSelectorQuery cannot be selected inside the plug-in.

# page

The plugin's page is supported from Weixin Mini Program base library version {% version ('2.1.0')%}.

When you need to jump to a plugin page,urlUseplugin: / /prefixes, such as`` plugin: / / PLUGIN_NAME / PLUGIN_PAGE`, such as:

Code example:

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

# Js interface

When using the plugin's js interface, you can use therequirePluginmethod.For example, a plug-in provides a method namedhelloand a variable namedworldthat can be called as follows:

var myPluginInterface = requirePlugin('myPlugin');

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

From the base library {% version ('2.14.0')%}, you can also get the interface through the plug-in's AppID, such as:

var myPluginInterface = requirePlugin('wxidxxxxxxxxxxxxxxxx');

# Export to the plugin

{% minicode ('GbXmMLml7vjC')%}, you need to manually fill in theminiprogram / apagejson

Starting with the base library {% version ('2.11.1')%}, you can use the plug-in's Weixin Mini Program to export some content for the plug-in to retrieve.Specifically, when declaring the use of a plug-in, you can specify a file with theexportfield, such as:

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

Then the exported contents of the file (in the example above,index.js) can be obtained by the plugin using global functions.For example, in the above file, using the plugin's Weixin Mini Program, you do the following export:

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

The plug-in then gets the content exported above:

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

To specify what content to export, you can read the plug-in development documentation and make an agreement with the plug-ins developer.

This feature can also be used when the plug-in is in a sub-package, but the path of the specified file is relative to the sub-package.For example, in the subcontract ofroot: packageA,export: exports / plugin.js,Then the specified file on the document system should be/ packageA / exports / plugin.js.

Exports of multiple plug-ins used are not affected by each other, and two plug-ins can export the same file or different files. However, when exporting the same file, if one plug-in makes changes to the exported content, the other plug-in is affected as well, so be aware of this.

Be careful about exporting a wx object or a specific wx API, which allows the plug-in to call the API as the user Weixin Mini Program.

You can also refer to the documentation for developing plug-ins

# Provide custom components for plug-ins

{% minicode ('QRRovLmu7Xjm')%}, you need to manually fill in theminiprogram / apagejson

Sometimes a plug-in might give a section of a page or a custom component to use Weixin Mini Program to render, so the Mini Program that you need to use provides a custom components. However, since you cannot specify the Mini Program's custom component path directly in a plug-in, you need to do so by specifying generics for the plug-in.

If a custom component of a plug-in needs to specify an abstract node implementation, you can specify:

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

From the base library {% version ('2.12.2')%}, you can specify abstract component implementations for plug-in pages through configuration items.For example, specify a custom component of Weixin Mini Program for an abstract node in a page with the plugin nameplugin-index``mp-view`` components / comp-from-miniprogramas implemented words:

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

You can also refer to the documentation for developing plug-ins