# Plugin Function Page

Plugin Function Page Mini Program Base Library Version 2.1.0 Start supporting.

Some interfaces cannot be called directly in a plug-in, such as wx.login), but plug-in developers can implement functionality using plug-in feature pages. Currently, the plugin features page includes:

Access to user information, including Openid And nicknames, etc. (equivalent to wx.login and [wx.getUserInfo ]((wx.getUserInfo )) Of the function), as detailed in the User Information Features Page

From the base library version 2.22.1 Since then, the following function pages have been abandoned, and the corresponding interface implementation functions can be directly invoked:

Payment (Direct Use wx.requestPluginPayment）

From the base library version 2.16.1 Since then, the following three function pages have been abandoned, you can directly call the corresponding interface implementation functionOriginal and New Use <functional-page-navigator> After clicking it will not jump to the feature page, but directly into effect:

Shipping Address Feature Page (use directly wx.chooseAddress）
Invoice Header Feature Page (Use directly wx.chooseInvoiceTitle）
Invoice Function Page (use directly wx.chooseInvoice）

To use a plug-in feature page, you need to activate the feature page feature, configure the corresponding feature page function, and then use the functional-page-navigator The component jumps to the plug-in function page to implement the corresponding function. Please refer to below for details.

Before you use the plug-in feature page, you need to make sure that the plug-in has Opening, which may otherwise arise functional-page-navigator No response after clicking, etc.

# Plug-in owner Mini Program

Before starting development, we need to know that the plugin features page refers to Plug-in owner Mini Program On a special page.

Plug-in owner Mini Program, refers to the connection with the plug-in AppID The same little program. For example, the "Mini Program example" Mini Program develops a "Mini Program example plug-in," then no matter which Mini Program the plug-in is used by, the plug-in's Plug-in owner Mini Program All are "Mini Program examples." Will continue to be used below Plug-in owner Mini Program That statement.

# Plug-in owner Mini Programs development method

Usually, when you start using the plug-in features page, you need to open two developer tools windows, one of which opens the plug-in project and the other opens the Mini Program project of the plug-in owner Mini Program. For example, one opens the Mini Program Sample Plug-in project and the other opens the Mini Program Sample project.

These two windows, the former for editing the plug-in and the latter for editing the plug-in owner Mini Program. All the content that needs to be edited in the plug-in owner Mini Program below is done in the latter.

# Activation Features Page Features

To invoke a plug-in feature page in a plug-in, you need to activate the feature page feature of the plug-in owner Mini Program. Specifically, in the plug-in owner Mini Program's app.json Add to the file functionalPages Define the segment and let its value be true , e.g.:

Code example:

{
  "functionalPages": {
    "independent": true
  }
}

Currently compatible with the old style:

{
  "functionalPages": true
}

Support for the old style will be removed in the future, and it will not compile and upload in the future.

The difference between the two is that the new style of writing "independent": true This makes the code of the plug-in function page independent of other code, which means that the plug-in function page can be downloaded and loaded independently, with better performance. But it also makes the plugin function page directory functional-pages/ (the payment function page will use the files in it) cannot Require Files outside of this directory (and vice versa: files outside of this directory cannot call files inside this directory either).

Note that adding or changing this field requires a new version of the Mini Program to use the plug-in features page in a formal environment.

The feature page cannot be used [wx.navigateTo ]((wx.navigateTo )) To make the jump. Instead, you need a file named functional-page-navigator Of the components. To get user information, for example, you can place the following in the plug-in functional-page-navigator：

Code example:

<functional-page-navigator name="loginAndGetUserInfo" args="" version="develop" bind:success="loginSuccess">
  <button>Login to Plugins</button>
</functional-page-navigator>

The user is clicking on this navigator Automatically jump to the corresponding feature page of the plug-in owner Mini Program. The feature page prompts the user to log in or other appropriate actions. The result of the operation is returned as a component event.

functional-page-navigator Of the parameters and detailed usage can be referred to the Component Dxplaination 。

Mini Program base library version 2.4.0 To start, support the plug-in owner Mini Program to jump to its own feature page. The base library version is lower than the 2.4.0 When clicking to jump to their own feature page of the functional-page-navigator There will be no reaction.

# Common Steps for Real Machine Development and Testing

At present, the function page jump is not currently supported in the developer tools debugging, please test on the real machine. In the first real machine development test, the usual steps are as follows:

Open the Plugin Owner Mini Program project on Developer Tools and click "Preview"
Scan the preview two-dimensional code with the real machine for testing, and then enter the plug-in owner Mini Program, and you can exit the Mini Program directly after entering it.
Open the plug-in project on Developer Tools and place the functional-page-navigator to hit the target version Property is set to develop
Click on the preview to generate a plug-in preview two-dimensional code, with the test of the real machine scan the code to preview the functional pageIf you change the plugin code, regenerate and scan the preview QR code of the plugin.
If after a period of time, the "development version has expired" prompt appears when you jump to the function page, from the 1 Step to start trying again.

Be careful：functional-page-navigator of version=develop For debugging only, so before the plug-in arraignment, you need to:

Make sure that the settings have been published "functionalPages": true The plugin owner Mini Program
Make sure that all the functional-page-navigator The component property is set to version="release" 。

# Features Page Frequently Asked Questions FAQ

# How do I properly edit the plug-in owner Mini Program?

Should be edited in a "Mini Program" type project in developer tools, not a "plug-in" type project. For example, the owner of "Mini Program Example Plug-ins" Mini Programs are "Mini Program examples," and their AppID Both. wxidxxxxx , if you are developing a "Mini Program example" Mini Program for the first time, you can create a Mini Program project in developer tools AppID for wxidxxxxx If you have developed a "Mini Program example" Mini Program before, you can directly open the previous Mini Program project.

# to hit functional-page-navigator There was no reaction afterwards.

Please check that the Mini Program referring to the plug-in and the plug-in itself are not the same AppID , If so, jumping to your own feature page requires the base library 2.4.0 Support, otherwise use the functional-page-navigator There will be no reaction.

# to hit functional-page-navigator After that, it shows a page that says "the page does not exist."

This is the case because the plug-in owner Mini Program is not set properly "functionalPages": true If functional-page-navigator of version="develop" , this phone needs to scan the code and enter the plug-in owner Mini Program onceif version="release" , Make sure to include "functionalPages": true The plugin owner Mini Program has been released.

# to hit `<functional-page-navigator version="develop">` After that, the pop-up window prompts "Mini Program Development Version has expired."

In this case, re-scan the code and enter the plug-in owner Mini Program once.

# to hit `<functional-page-navigator name="requestPayment">` After that, a page was shown saying "This feature is not available."

When using the plug-in function page, the Mini Program cannot be a personal Mini Program, and the plug-in also requires additional steps to apply for the opening of the plug-in payment permission (located in the Management background -> Mini Program plug-in -> Basic settings -> Ability to pay ）。

# to hit `<functional-page-navigator name="requestPayment">` After that, click the "Pay" button in the page and immediately exit the payment function page.

This is usually because the feature page function is not found beforeRequestPayment , please check the plug-in owner Mini Program's functional-pages/request-payment.js Documents and in them. beforeRequestPayment Whether the function exists.

# to hit functional-page-navigator After that, a page with only the back button is shown.

Please check functional-page-navigator of Name Property is set correctly.

# The development version can jump normally, but the audit feedback can not jump.

Please post the settings "functionalPages": true Of the plug-in owner Mini Program, and all the functional-page-navigator The component property is set to version="release" 。

# Bugs & Tip

A feature page is a special page in the plugin owner Mini Program. Developers cannot customize the appearance of this page.
The plug-in owner Mini Program itself can also reference the plug-in, at which point,functional-page-navigator Component version Property will not take effect, but will depend on the version of the plug-in owner Mini Program that is currently running.
functional-page-navigator It can be used in Developer Tools, but the function page jump is not currently supported in Developer Tools. Please test it on a real machine.
Bug: in WeChat version 6.6.7 Is triggered when the feature page is pulled up App And make the feature page start time longer. This behavior will change in the subsequent WeChat version, so that App The life cycle is no longer triggered.