Applet plug-in access, development and precautions

Preface : Work needs , Developed a small program plug-in , For the first time contact , A lot of holes , learn from one's mistakes , Make a note of , The official documents are complete , There's no need to move all over , This paper mainly records the pits I stepped on , And the attention points in the development process

Write it at the front :

1. The open scope of applet plug-ins : Enterprises 、 The media 、 Government and other organizations , That is, do not develop personal accounts
2. Applet plug-ins have service category restrictions , Specific view : Plug in service category
3. Just use Payment function page , It must be To enable the payment capability of the plug-in in the background ! Even if the payment is made by a third party , It must also be opened ( A bloody reminder )
4. Open wechat payment , You need to select a service provider mode , And fill in the service provider's account number
5. The local cache of the plug-in and the local cache of the plug-in user applet have walls , I.e. isolated from each other , The local cache set by the plug-in user cannot be called in the plug-in , vice versa
6. Plug in owner applet , It refers to the same as the plug-in AppID Small program , for example : "  A north "  In this small program " Guide you all the way " This plugin , No matter who references this plug-in , The plug-in owner applet is always " A north "
7. some API Plug ins are not allowed to call ( These functions do not exist in  wx  Under the object ), So before development , It is best to test whether the interface to be used is in wx Under the object
8. The request domain name list of the plug-in is independent of the applet

Text begins ~

1、 Plug in development access process :  Official access process

  In general, it is divided into three parts 5 Step , as follows :

Note in this section :

• Before starting to develop plug-ins, you should first open the plug-ins , Otherwise, the plug-in cannot be uploaded , To call the development version plug-in, you need to upload the plug-in to get the plug-in test ID
• The server domain name of the plug-in is not shared with the applet that mounts the plug-in , So it needs to be set separately

Officially developed ~

2、 Developing a plug-in

• Create plug-in project  
  Development mode selection plug-in , host AppID And plug-ins AppID Agreement , Not applicable to cloud services , Click ok , Successfully created plug-in project
  
  
  Create a successful project , Contains three directories :
      a、plugin ： Plug in code directory .
      b、miniprogram ： For plug-in debugging 、 Preview and audit applet .( Not a plug-in owner applet )
      c、doc ： Used to place plug-in development documents . Before being arraigned for trial, submit README.md File to the applet background , As a development document

      

In development tools , The development mode should be selected as plug-in mode , stay miniprogram In the catalog app.json in ,  The configuration is as follows ,provider Is the plug-in provider , It's the plug-in AppID

•   Plug in profile
  All custom components open to consumer applets 、 Page and js Interfaces must be in the plug-in configuration file  plugin.json  List
• Custom components
  A plug-in can define several custom components , These custom components can all be referenced within the plug-in . However, the custom components provided to the user applet must be in the... Of the configuration file  publicComponents  Listed in paragraph
• page
  A plug-in can define several plug-in pages , You can customize components from this plug-in 、 Jump to... In other pages , Or jump from the user applet . All pages must be in the configuration file  pages  Listed in paragraph
  
  When the plug-in performs page Jump , have access to  navigator  Components . When the plug-in jumps to its own page , url  Should be set to this form ：plugin-private://PLUGIN_APPID/PATH/TO/PAGE . need When you jump to another plug-in , It can also be set in this way  url .

  From base library version  2.2.2  Start , In the plug-in's own page , The plug-in can also call  wx.navigateTo  To perform page Jump , url  Format and use  navigator  Components are similar .

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

• preview , Publish and upload
  Preview of plug-ins and applets 、 Upload consistent , The plug-in has no experience version , There will be multiple versions of plug-ins online , Plug in users can decide which version to use
• Use the development version plug-in in the development version applet
  First, click the upload button in the upper right corner of the development tool , Upload the plug-in project , There is a plug-in development in the message of successful upload ID, Put this ID Copy down , In the development version applet that needs to use this development version plug-in , take version Set to : "version": "dev-[ Development Edition ID]"
  
  
  Be careful :
         a、 When the plug-in is uploaded again , Old development version ID It will fail.
         b、 The development versions uploaded by different developers of the same plug-in do not affect each other , Can be effective at the same time
•   Plug in development documentation
    The plug-in development document will be displayed on the plug-in details page , For other developers to read and reference when browsing and using plug-ins
  The plug-in development document is the project directory doc Medium README.md file , To use pictures in a document , The picture needs to be placed in doc You cannot use network pictures in the directory ,
  Right click in the development tool README.md File selection upload , You can see the uploaded file in the applet background , You can preview and publish files in the applet background
   

3、 Plug in function page (  Plug in owner applet   A special page in )

Because there are some API It cannot be used in plug-ins , Such as obtaining user information 、 Payment, etc , Wechat provides a plug-in function page to realize this function , There are 5 Function pages , Namely :

•       User information function page
•       Payment function page ( Interface :wx.requestPluginPayment)
•       Harvest address function page  ( Interface : wx.chooseAddress)
•       Invoice function page  ( Interface : wx.chooseInvoice)
•       Invoice header function page ( Interface : wx.chooseInvoiceTitle)

Be careful :
    a、 If the plug-in is not enabled ,functional-page-navigator  There will be no response after clicking
    b、 To use the plug in feature page , You need to activate the feature page first , Configure the corresponding function page , Reuse  functional-page-navigator  Component to plug-in function page , So as to realize the corresponding functions .
    c、 stay Basic library version 2.22.1 rise , In addition to the user information function page , The other four function pages can realize functions by directly calling the corresponding interfaces .

    d、 The function page function needs to be placed in the root directory of the plug-in owner applet , And app.json At the same level
         

    f、 Function page Jump currently does not support debugging in developer tools , Test on the real machine ( Bear in mind ! Bear in mind ! Bear in mind !)

           

•   Activate the function page feature
  
  To call the plug-in function page in the plug-in , You need to activate Plug in owner applet Features of the function page . say concretely , In the plug-in owner applet  app.json  Add... To the file  functionalPages  Definition segment , And make it worth  true , Old style writing will be removed , In the future, it will not be directly compileable , The old way of writing is not shown here

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

 ps: A simple record of learning and growing up , If there is anything inappropriate , Welcome to exchange !