Mini Program
  • 中文
  • EN
取消
Development
  • 中文
  • EN
中文
EN
取消
  • Guide

    • # Feature Page of Plug-Ins

    The feature page of plug-ins is supported as of the Mini Program base library 2.1.0.

    Some APIs (such as wx.login) cannot be directly called in plug-ins. However, plug-in developers can use the feature page of plug-ins to implement the features. Currently, the feature page of plug-ins includes the following features:

    Before using the feature page of plug-ins, you need to activate the feature page attribute, configure corresponding functions, and then use the [functional-page-navigator]((functional-page-navigator) component to redirect to the feature page of plug-ins. For details, refer to the following.

    # Plug-In Owner Mini Program

    The feature page of plug-ins is a special page in the plug-in owner Mini Program.

    The plug-in owner Mini Program refers to the Mini Program whose AppID is the same as that of the plug-in. For example, if a plug-in "Mini Program Sample Plug-In" is developed for a Mini Program "Mini Program Sample", the plug-in owner Mini Program of the plug-in is always "Mini Program Sample", regardless of the Mini Program using the plug-in. The following continues to use the term plug-in owner Mini Program.

    # How to develop the plug-in owner Mini Program

    Before using the functional page of plug-ins, you usually need to enable two Weixin DevTools windows: one to open a plug-in project, and the other to open a 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.

    The first window is used to edit a plug-in, and the second window is used to edit the plug-in owner Mini Program. In the following, all operations about editing the plug-in owner Mini Program are performed in the second window.

    # Activating the Feature Page Attribute

    The feature page attribute of a plug-in owner Mini Program must be activated if you want to call the plug-in feature page in a plug-in. Specifically, add the definition field functionalPages to the app.json file of the plug-in owner Mini Program, and set the value of the definition field to true, for example:

    Code example:

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

    Currently, the old code style is supported:

    {
  "functionalPages": true
}

    However, the old code style will not be supported in the future, and code in the old style cannot be edited and uploaded in future.

    A difference between the old and new code styles is that "independent": true in the new code style allows the code of the feature page of plug-ins to be independent of other code. This means that the feature page of plug-ins can be separately downloaded and uploaded to achieve better performance. In addition, the directory functional-pages/ (the payment feature page may use a file in this directory) of the plug-ins feature page cannot require a file outside the directory (and vice versa: A file outside the directory cannot call a file in the directory).

    Note: To add or modify this field, you need to release a new version of the Mini Program, so that the plug-ins feature page can be used in the formal environment.

    # Redirecting to the Feature Page

    To redirect to a feature page, you need to use a functional-page-navigator component instead of wx.navigateTo. For example, to obtain user information, you may add the functional-page-navigator component to a plug-in as follows:

    Code example:

    <functional-page-navigator name="loginAndGetUserInfo" args="" version="develop" bind:success="loginSuccess">
  <button>Log in to a plug-in</button>
</functional-page-navigator>

    When clicking navigator, the user is automatically redirected to the corresponding feature page of the plug-in owner Mini Program. The featurel page will prompt the user to log in or perform other corresponding operations, and the operation result will be returned as a component event.

    For parameters of functional-page-navigator and how to use them, see Component Description.

    As of the Mini Program base library 2.4.0, the plug-in owner Mini Program can redirect to its own feature page. For the base library versions earlier than 2.4.0, the plug-in owner Mini Program is not responding when functional-page-navigator is clicked to redirect to its own functional pages.

    # General Steps of a Physical Device Test

    Currently, the feature page redirection cannot be debugged in the Weixin DevTools. Please test it on a physical device. The first development test on the physical device usually includes the following steps:

    1. Open a plug-in owner Mini Program project via the Weixin DevTools and click Preview.
    2. Use a physical device to scan a preview QR code. Then you will be redirected the plug-in owner Mini Program and can exit after entry.
    3. Open a plug-in project via the Weixin DevTools and set the version property of functional-page-navigator in the plug-in to develop.
    4. Click Preview to generate a plug-in preview QR code, and use the physical device to scan the code to preview the feature page. If the plug-in code is modified, re-generate a plug-in preview QR code and scan it.
    5. After a while, if the message "The developer version has expired" is displayed during redirection to the feature page, try again from step 1.

    Note: version=develop of the functional-page-navigator component is used only for debugging. Therefore, before submitting the plug-in for approval, ensure that:

    1. The plug-in owner Mini Program for which "functionalPages": true is set has been released.
    2. All properties of the functional-page-navigator component are set to version="release".

    # FAQs for the Feature Page

    # How can I correctly edit a plug-in owner Mini Program?

    • You should edit the plug-in owner Mini Program in a "Mini Program" project, instead of a "plug-in" project, in the Weixin DevTools. For example, the owner Mini Program of "Mini Program Sample Plug-In" is "Mini Program Sample", and their AppIDs are both wxidxxxxxxxxxxxxxx. If you are developing a Mini Program "Mini Program Sample" for the first time, you can create a Mini Program project with the AppID wxidxxxxxxxxxxxxxx via the Weixin DevTools. If you developed a Mini Program "Mini Program Sample" before, just open the previous Mini Program project.

    # I get no response after clicking functional-page-navigator.

    • Check whether the AppID of the Mini Program referring to the plug-in is the same as the AppID of the plug-in. If yes, ensure that the base library version is 2.4.0; if no, the plug-in will not respond to functional-page-navigator.

    # The message "The page does not exist" appears after I click functional-page-navigator.

    • This occurs because "functionalPages": true of the plug-in owner Mini Program is not correctly set. If version="develop" in the functional-page-navigator component, you need to use the mobile phone to scan the QR code and log in to the plug-in owner Mini Program once; if version="release", ensure that a plug-in owner Mini Program containing "functionalPages": true has been released.

    # A message "The Mini Program developer version has expired" appears after I click <functional-page-navigator version="develop">.

    • Scan the QR code again to enter the plugin owner Mini Program.

    # A message "The feature is unavailable" appears after I click <functional-page-navigator name="requestPayment">.

    • The feature page of plug-ins does not work for personal Mini Programs, and you need to apply for the payment permission for the plug-in (by clicking Mini Program Plug-In > Basic Settings > Payment Capability in Admin Console).

    # The payment function page is closed immediately after I click <functional-page-navigator name="requestPayment"> and the Pay button on the page.

    • This is usually because the feature page function beforeRequestPayment is not found. Check whether the functional-pages/request-payment.js file of the plug-in owner Mini Program and the beforeRequestPayment function in the file exist.

    # A page containing only the back button appears after I click functional-page-navigator.

    # Redirection worked properly in the developer version, but failed according to feedback from the reviewer.

    • Release the plug-in owner Mini Program for which "functionalPages": true is set, and set all properties of the functional-page-navigator component to version="release".

    # Bugs & Tips

    • The feature page is a special page in the plug-in owner Mini Program. Developers cannot define the appearance of the page.
    • When the feature page appears, some APIs related to page display will be disabled (fail is returned when such APIs are called).
    • The [functional-page-navigator]((functional-page-navigator) component can be used via the Weixin DevTools. However, the feature page redirection cannot be debugged in the Weixin DevTools. Please test it on a physical device.
    • Bug: In Weixin 6.6.7, some lifecycles of the app will be triggered when a feature page is suspended, and it will take a relatively long time to start the feature page. In later versions of Weixin, this will be changed, so that the lifecycle of the app is no longer triggered in this case.