Mini Program
取消
开发
中文
EN
取消
  • 平台能力

    • # Quick Access Mini Program Login Service

    in App Mode, using the wx.getMiniProgramCode replace wx.login Can be completed in the Mini Program background service zero change App The adaptation of the login logic for the.

    • The basic principles are:[wx.getMiniProgramCode ](https://dev.weixin.qq.com/docs/framework/dev/jsapi/auth/Weixin/wx.getMiniProgramCode .html) Returned Code You can continue to use Mini programs.code2Session Obtain OpenidandUnions, so as to achieve the background of the service code logic without any adjustment to complete the adaptation.
    • wx.getMiniProgramCode Of the timing chart is as follows:
    • Two concepts mentioned in the diagramApp Login PageandMini Program authorization pageDevelopers need to pay special attention to these two Page Distinction as well as the use of

    • about App The Mini Program login page:

      • The page is in App In the project
      • Developers can customize the development App Login page (pictured above is indicative of the official built-in Demo Login page)

    • About the Small Program Authorization Page:

      • The page is in the Mini Program project, but does not affect the Mini Program code package size
      • And the sender needs to re-publish the Mini Program before it can take effect, otherwise it will appear when the user from App When I jumped over to the Mini Program for authorization.This page does not existError reporting
      • The developer cannot customize this license page

      # Be careful

      • This feature is not recommended inMobile App AssistantTest, it is recommended to build the installation package on the phone for real machine testing
      • becauseMobile App AssistantConfiguration as well as SDK The configuration is complete, i.e. inMobile App AssistantTesting is not the same as building, installing, packaging to the phone and testing is fine. Therefore, it is recommended that developers follow the full operation of the document below.

    # I. Overview of Access Steps

      1. The multi-terminal application is bound to the mobile application account, if it is not bound, you can follow the[Mobile App Binding Guide](https://dev.weixin.qq.com/docs/framework/Guideline/web/bind-openapp .html)For operation.
      1. Go to the Multiterminal Application Console to turn on identity management services
      1. Go to WeChat Developer ToolMini Program login serviceTo configure
      1. Process and logic tune, you can customize the developmentApp Login Page(In Step 3 Built into the App The login page is for development debugging only, not as a formal App The login page)

    # II. Launching identity management services

      1. log inMultiterminal application console, Go toIdentity managementAgree to the service agreement.
      1. And make sure the state isCan be usedIf the multiterminal application has already bound Mini Program account and mobile application account, the state is usable

    # III. Configuring the Mini Program Login Service

    # 3.1 Download the WeChat Developer Tool

    # 3.2 Check the required SDK

    • Go to project.miniapp.json will openSDK Tick on (if your developer tools are not found openSDK This expansion SDK, that is the tool version is too low, please upgrade to the most recent version nightly ）

    • Attention, Android and iOS All need to be ticked

    # 3.3 Enter Multiterminal Application Mode and Configure Mini Program Login Service

    • Upgrade the original Mini Program project to multi-terminal project, and switch to multi-terminal application mode
    • Go tomenu bar - tool - Configure Mini Program login service
    • to hitdetermineYou can complete the Mini Program login service configuration with one click
    • Just a moment to configure successfully

    # 3.4 Mini Program login service a key configuration principle

    • 3.3 The developer tools help the developer in the operation of app.json Added in useAuthorizePage Used to mark whether the built-inMini Program authorization page
    • Mini Program authorization pageThe style can be seen in the previous introductionAnd the Page Size does not take small code package size
    • BecauseMini Program authorization pageIs in a Mini Program project, that is, the developer needs to develop the Mini Program/Experience version/Official version recompile & release version, only in the corresponding development version/Experience version/Access to the authorization page in the official version, otherwise it will appearThis page does not existError reporting
    • 3.3 The developer tools also help developers build in multiterminal application projectsApp The Mini Program login page, but the default Page code is inserted during the build phase of the application, so developers won't see it in your multi-terminal project. Page The existence of
    • In addition, the developer tools also help developers in app.miniapp.json The more complete configurations are described below:

    # 3.5 Special Considerations

    • The relevant configuration developer tools have helped developers do this, but to be effective, developers will not only need to rebuild in multi-app mode. App, also need to cut back to Mini Program mode, and then rebuild the Mini Program new version will take effect!!!
    • In the default configuration, the Mini Program login configured for the developer is the jumpDevelopment versionMini Program to log in, so the developer needs to cut back to Mini Program mode and then re-preview, then scan the QR code using WeChat to make sure you already have the latest version on your phone.Mini Program authorization pageofDevelopment Mini Program

    # IV. Custom App Login Page

    # 4.1 New multi-terminal login Page

    • According to the above steps, you can initially tune through the Mini Program login service, but use the official default App Login page, the page style, interaction, copy, etc., does not meet the developer's business needs. Therefore, developers need to customize the development to meet the business requirements. App Login page.
    • To make it easier for developers to develop custom App Login page, the developer tools also support theNew multi-terminal login PageOf the function, the operation is as follows:
      • WeChat Developer Tool Selection Multiterminal application mode
      • New in the Mini Program project donutLogin Folder (donutLoginJust an example, the developer can customize the name)
      • Then, right click at that folder “New multi-terminal login Page” , Input donutLogin Then enter to confirm (donutLoginJust an example, the developer can customize the name)
    • Supplement, the default App If the login page does not meet the business needs, the developer can modify it himself

    # 4.2 modify miniprogramLoginPath

    • By default miniprogramLoginPath Configured is the __default__, even with the official configuration Demo page
    • When the developer has completed a custom App After the login page is developed, you can modify the configuration
    // app.miniapp.json 
{
    "identityServiceConfig":  {
        "authorizeMiniprogramType": 1, // You can specify the version of the jump Mini Program (0: official version, 1: development version, 2: experience version)
        "miniprogramLoginPath":  "/pages/donutLogin /donutLogin  // Path to the developer's custom login page
    }
}

    After following the above steps, you can complete the docking of the Mini Program login service, and if you encounter problems, you can refer to the common problem investigation guidelines below for self-investigation.

    # V. FAQ Troubleshooting Guide

    # 5.1 This page does not exist

    • This is the version of the Mini Program you are currently accessing that does not existMini Program authorization page, and the version of the Mini Program you access is provided by theauthorizeMiniprogramTypeControlled
    • That is to say, after you have repairedauthorizeMiniprogramTypeAfter that, you need to cut back to the Mini Program mode to send the version, not to say that you already have the corresponding version of the Mini Program!!!
    • For example, you putauthorizeMiniprogramTypeChanged it to 0 (Official version), then your Mini Program needs to be re-released in a new version, not that you have an online version of the original Mini Program!!!

    # 5.2 Mini Program authorization page appeared watermark

    • Watermark: This watermark can be removed by binding a mobile app to a multiterminal appIf the mobile application has been bound, it is necessary to switch to the Mini Program mode in the developer tools and resubmit the Mini Program code to generate a new version to eliminate the watermark.
    • Why does this watermark appear when it is clearly bound to the mobile app? This is because when you build Mini Programs in developer tools, your multiterminal application is not yet bound to the mobile application!!!
    • At this point, you just need to switch back to Mini Program mode in developer tools, and then rebuild the new version of the Mini Program.
    • If the developer is using the mobile application assistant in the experience, when your multi-terminal application is not yet bound to the mobile application, the watermark will also appear.At this point, you just need to create a mobile application account and bind it to the multi-terminal application, and then rebuild it.

    # 5.3 Mini Program authorization page only reject button

    • That is, there is only a button to deny authorization on the Mini Program authorization page, there is no button to determine.
    • This is because the user is not receiving the data fromApp Pull up Mini ProgramThis scene enters the authorization page, but through other ways, such as scanning the code, such as directly in the Mini Program drop-down there access, and so on.
    • Because from other scene values into theMini Program authorization pageEven if the user clicksdetermineButton, and there is no way to return The app makes the whole experience incomplete. Therefore, the logic of the authorization page is to limit the number of items that can only be obtained fromApp Pull up Mini ProgramWay to enter, waiting for the user to clickdetermineCan return normally. App This way.