How to understand the applet plug-in? WeChat and Alipay Official Detailed Explanation

1. Function introduction of applet plug-in

1. How to understand plug-ins

A plug- in , whose English name can be called "Plug-in, Plugin, add-in, addin, add-on, addon or extension", is an auxiliary program attached to the main program, which is used to replace the main program through interaction with the main program. The main program needs to add some required specific functions.

More generally speaking, parts similar to machines can be added to the program in the form of "plug-in", so as to obtain a special ability, multiple plug-ins can be shared, and the final development program is as convenient as building blocks.

The technical principle of the plug-in itself is not complicated. The plug-in code consists of some custom components and JS code files. When the plug-in developer releases the plug-in, these codes are uploaded to the WeChat background and saved.

When the applet uses a plug-in, the user needs to fill in the AppID and version number of the plug-in in order to obtain the corresponding plug-in code from the background. When the applet code is compiled, the plug-in code will be embedded in the applet and compiled and run together with the applet.

2. The role of the applet plug-in

Mini-program plug-ins, as the name suggests, are plug-ins used to run and call small programs. The widespread promotion and use of small program plug-ins can achieve " development sharing, avoiding repeated development", "providing complete services for the industry, and covering online and offline", " Reduce the problem of service threshold and realize positive effects such as "service sharing" .

In order to help you better understand the function of the mini-program plug-in, let’s take a look at the official description of the mini-program plug-in by WeChat and Alipay.

WeChat Mini Program official description:

A plug-in is a functional component that can be added to an applet and used directly. Developers can develop a plug-in in the same way as developing applets for use by other applets. At the same time, applet developers can directly use plug-ins in the applet without repeated development, providing users with richer services.

The official description of the Alipay applet:

A plug-in is an independently packaged software module, which is used to carry the capabilities or services of the enterprise, and facilitate the quick integration of the host applet. Different from ordinary components, plug-ins have independent applications and independent contexts, namely data, business logic and server connections. When the applet application needs to use the service of the plug-in, load and run the plug-in, so that the plug-in can access its own data and server, and complete the corresponding service; when the applet does not need to use the service of the plug-in, it only needs to run the applet application itself, to access the data server of the Mini Program application itself. The plug-in and the host applet context are isolated from each other, that is, the applet application cannot directly access the data of the plug-in, nor obtain the permissions of the plug-in. Conversely, the plug-in cannot directly access the data of the applet, nor obtain the permissions of the applet.

 

In addition, the plugin is very flexible:

• Can contain multiple components for the host applet to embed.
• It can contain multiple pages for the host applet to jump to.

• Multiple interfaces can be exposed to the host applet for the host applet to call.

This feature of the plug-in makes the plug-in have the following advantages over ordinary components:

• Since the plug-in is an independently encapsulated business function and service, it is more convenient for the host applet to integrate and use the plug-in.
• Since the plug-in runtime framework provides a context isolation mechanism, the data security inside the plug-in is more guaranteed.

• Since the plug-in has an independent application, the plug-in can be released independently, and the development and upgrade are more efficient.
• The plug-in supports commercial ordering and settlement, which is convenient for developers to monetize and commercialize services.

2. Introduction to Mini Program Plug-ins

1. The problem that I hope the applet plug-in can solve

With the popularity of Mini Programs, more and more roadside stalls, restaurants, and mom-and-pop stores also hope to access Mini Programs, and many businesses will report problems that need to be solved urgently:

What should I do if I only do simple development and don't know how to do complex functions?

I also want to make a reservation and ordering function for the restaurant applet, how should I do it?

Can customers check express delivery information in my mini program?

I don't have data, can I do map search function in the applet?

……

Summarize the three major problems encountered in the mini program ecology:

Limited development technology makes it difficult to realize complex functions;

Manpower, equipment, and resources are limited, and the service cost is high;

Lack of qualifications in certain categories, such as e-commerce and taxi-hailing.

And the above problems can be solved through small program plug-ins.

Then through the online survey results of 218 users through the "Knowledge Program", we can see:

Applicants who want to develop plug-ins for business types (including video, audio, etc.) account for 4.37% of the total number.

10.68% of the total number of applicants want to develop plug-ins for public interface types (including weather, geographic location, etc.) .

22.33% of the total number of applicants who want to develop plug-ins for package type (including image processing, message, customer service, marketing, etc.) .

Applicants who want to develop plug-ins for e-commerce (including shopping coupons, lottery draws, etc.) account for 8.74% of the total number of applicants.

11.65% of the total number of applicants who want to develop plug-ins for the bottom type (including search, scan code, login, comment, payment, etc.) .

Applicants who want to develop plug-ins as tools account for 11.65% of the total number of applicants.

The applicants whose development type is not clear for the time being accounted for 4.37% of the total number.

From the survey results, it is also found that the problems that everyone hopes the applet plug-in can help solve are as follows:

• Anyone with a technical development background hopes to have encapsulation functions (UI optimization and framework components), and plug-ins that can optimize development efficiency to appear earlier;
• Those who choose e-commerce are in urgent need of more marketing plug-ins and data processing plug-ins such as lottery draws and big turntables;
• Choose the underlying type, complaining that some functions of the WeChat applet are not easy to use, and hope that there will be a better solution plug-in;
• Most of the people who are not clear for the time being do not understand technology, but hope to directly obtain the template of the small program to realize profit

2. Types of small and medium program plug-ins in the market

Further statistical analysis of plug-ins in the WeChat mini-program and Alipay mini-program plug-in markets shows that there are 175 plug-ins in the WeChat mini-program plug-in market, and 115 plug-ins in the Alipay mini-program plug-in market. These small program plug-ins can be roughly divided into tools, Marketing interaction, city service, education, catering, shopping and other major categories.

These plug-ins are called by small programs and are used in hundreds of service scenarios including government affairs halls, information inquiries, smart homes, group buying, and social live broadcasts.

Taking small programs in tourist attractions as an example, map plug-ins can be used in small programs in tourist attractions. Developers do not need to independently develop capabilities such as navigation in the map, travel guidance, and surrounding service recommendations in the small program, and can directly use the map plug-in to provide users with Navigation service. Using the ticket purchase plug-in, the user can complete the online booking and purchase of tickets in the mini program. After arriving at the scenic spot, the ticket exchange and verification can be completed through the mobile terminal or hardware device provided by the plug-in service provider.

For offline industries such as catering and retail, plug-ins greatly reduce the cost of merchants. Merchants can use plug-ins such as booking, queuing, and take-out, and plug-in developers provide offline services. By referring to the plug-in, you can use services such as booking and takeaway provided by the plug-in developer, which saves costs.

3. How to develop and import applet plug-ins

1. Small program plug-in development

Generally speaking, each small program open platform has certain restrictions on the open scope of plug-in development. For example, the WeChat small program platform has opened up 22 industry-related plug-in development, among which there are further developments for medical services, financial industry, entertainment, social networking and other industries. special restrictions.

After understanding the development specifications of applet plug-ins, how to start the development of applet plug-ins in the correct way? In fact, all major platforms have released corresponding development tools and development guides.

We also take WeChat and Alipay as examples. Using WeChat developer tools and Alipay IDE tools can efficiently complete the creation and development of a small program plug-in. The specific development guide can be accessed at:

WeChat mini program plug-in development: https://developers.weixin.qq.com/miniprogram/dev/devtools/plugin.html

Alipay applet plug-in development: https://opendocs.alipay.com/mini/plugin/plugin-development

2. Introduction of applet plug-ins

For more users, we may need to introduce plug-ins. How to introduce plug-ins in applets? Here we take the FinClip applet as an example for practice.

The developer can introduce the declaration of the plug-in code in the applet code, and then when compiling with the FIDE development tool, FIDE will obtain the plug-in code from the server and package and compile together.

Please note

The plug-in function needs to be used in the environment of the basic library version ≥ 2.11.1 and the SDK version ≥ 2.34.0

2.1 Add plugin

Before using the plug-in, the developer can log in to "Mini Program Open Platform-Mini Program Management-Mini Program Plug-in", find the plug-in through the plug-in ID and add it.

2.2 Introducing the plug-in code package

Before using the plug-in, the user should declare the plug-in to be used in app.json, for example:

code example

{
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",
      "provider": "插件 id"
    }
  }
}

As shown in the above example, the plugins definition section can contain multiple plugin declarations, and each plugin declaration is identified by a user-defined plugin reference name, and indicates the plugin ID and version number to be used.

Among them, the reference name (such as myPlugin in the above example) is defined by the user, and there is no need to be consistent with or coordinate with the plug-in developer. In the subsequent use of the plug-in, the reference name will be used to represent the plug-in.

2.3 Introduce the plug-in code package in the subpackage

If the plugin is only used in one subpackage, you can put the plugin only in this subpackage, for example:

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

The use of plug-ins in subpackages has the following restrictions:

• The plug-in can only be used within this subpackage;
• The same plugin cannot be referenced by multiple subpackages at the same time;

2.4 Using plugins

When using a plugin, the plugin's code is invisible 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 use the documentation to clarify the custom components provided by the plug-in, the page name and the js interface provided specification etc.

2.5 Custom components

Using the custom components provided by the plugin is similar to using common custom components. When defining custom components that need to be introduced in the json file, use the plugin:// protocol to indicate the reference name of the plugin and the name of the custom component, for example:

code example

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

For the protection of the plug-in, the custom components provided by the plug-in have certain restrictions on the use:

• By default, the this.selectComponent interface in the page cannot obtain the custom component instance object of the plug-in;
• The >>> selector of interfaces such as ft.createSelectorQuery cannot be selected inside the plugin.

2.6 pages

When you need to jump to the plug-in page, use the plugin:// prefix in the url, such as plugin://PLUGIN_NAME/PLUGIN_PAGE, such as:

code example

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

2.7 js interface

When using the plugin's js interface, you can use the requirePlugin method. For example, a plugin provides a method called hello and a variable called world, which can be called like this:

var myPluginInterface = requirePlugin('myPlugin');

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

The interface can also be obtained through the id of the plug-in, such as:

var myPluginInterface = requirePlugin('插件 id');

2.8 Export to plugin

The applet using the plug-in can export some content for the plug-in to obtain. Specifically, when declaring the use of a plug-in, a file can be specified through the export field, such as:

{
  "myPlugin": {
    "version": "1.0.0",
    "provider": "插件 id",
    "export": "index.js"
  }
}

Then the exported content of this file (index.js in the above example) can be obtained by this plugin with a global function. For example, in the file above, the applet using the plugin does the following export:

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

Then the plugin can get the content exported above:

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

For specific export content, you can read the plug-in development documentation and make an agreement with the plug-in developer.

This feature also works when the plugin is in a subpackage, but the path to the specified file is relative to the subpackage. For example, if export: exports/plugin.js is specified in the subpackage of root: packageA, then the specified file should be /packageA/exports/plugin.js on the file system.

The export of multiple plug-ins used does not affect each other. Two plug-ins can export the same file or different files. But when exporting the same file, if a plugin modifies the exported content, the other plugin will also be affected, please pay attention to this.

2.9 Provide custom components for plugins

Sometimes, a plug-in may hand over a part of the page or custom component to the used applet for rendering, so the used applet needs to provide a custom component. However, since the plug-in cannot directly specify the custom component path of the applet, it needs to be provided by specifying an abstract node (generics) for the plug-in.

If the custom component of the plug-in needs to specify the abstract node implementation, it can be specified when referencing:

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

The abstract component implementation can be specified for the plug-in page through the configuration item. For example, if you want to specify the custom component components/comp-from-miniprogram of the miniprogram as the implementation for the abstract node mp-view in the page named plugin-index:

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

Congratulations, you have successfully completed the development of a plug-in or introduced it into an application. You can provide users with richer services through the Mini Program plug-in.