All Products
Search
Document Center

Mobile Platform as a Service:Extensions

Last Updated:Jul 26, 2023

Extension toolbox

The extended configuration of the mPaaS Mini Program is implemented in the IDE extension toolbox. Click the toolbox icon (toolbox) on the left side of the interface to open the IDE extension toolbox.

tool

Settings

Whitelist settings

Click Settings > Whitelist Settings in the toolbox, enter the whitelist and confirm. This whitelist corresponds to the userId logged in to the App client. Only when the whitelist is entered correctly can the Mini Program package for preview and debugging be obtained from the corresponding user.

Mini Program settings

Click Settings > Mini Program settings in the toolbox to open the settings page of the Mini Program. The system will prompt for error options in the configuration items according to the configurations in your Mini Program code.

settings

Features

Export

Click Function > Export in the toolbox, select the Mini Program version and click Export.

This function is to obtain the latest version of the official package of the Mini Program and download it to the local.

export

Clear cache

Click Function > Clear Cache in the toolbox to clear the cache files generated by the mPaaS Mini Program.

clear

Multi-terminal development

The Mini Program developed in the mPaaS Mini Program IDE can not only be put into the App developed using the mPaaS framework, but also can be used to evoke the WeChat Mini Program IDE for joint debugging through the mPaaS Mini Program IDE, or quickly build into an HTML5 application and realize real-device preview.

WeChat Mini Program

  1. Open the Mini Program IDE, in the template selection, use the multi-terminal development template (uni-app) or multi-terminal development template (remax) to create a multi-terminal development Mini Program project. If you have created a multi-terminal development Mini Program project, you can also directly open it.

    template
  2. Enter the project name and project path, then click Complete.

    1
  3. Download and install the WeChat Mini Program IDE. Log in and open the service port.

  4. Click the mPaaS toolbox (toolbox) on the left side of the IDE interface, and select the multi-terminal development tab on the right side.

    Multi-terminal
  5. Select WeChat Mini Program. In the configuration items below, you need to enter the following items:

    • Configure Developer Tools: The path of WeChat developer tools installed on this device.

    • Project name: The name of the Mini Program project displayed in the WeChat developer tool.

    • appid: The ID of the project created in the WeChat developer tool to be associated.

      wechat
  6. Click Start Debugging, then WeChat Mini Program developer tool will be aroused, and the real-time preview effect of the current Mini Program will be displayed in the developer tool.

  7. Real-device preview.

    Click Preview in the upper right of the WeChat Mini Program developer Tool interface, and use the mobile WeChat client to scan the generated QR code to preview the Mini Program in WeChat on the real device.

HTML5

  1. Start the Mini Program IDE and select a project that you want to develop multi-terminal.

  2. Click the mPaaS toolbox (toolbox) on the left side of the IDE interface, and select the Multi-terminal development tab on the right side.

    Multi-terminal
  3. Select HTML5 to expand, no additional configuration is required below.

    HTML5
  4. Click Start debugging, the IDE will pop up the HTML debugging window and start building, and a QR code for real device scanning will be generated.

    HTML5 preview
  5. Preview.

    You can choose to use your mobile phone for real-device preview, or use a computer browser to preview.

    • Real-device preview: Open an App that supports HTML5 on the mobile phone and scan the generated QR code to preview the Mini Program in the mobile App. At this time, you can also choose to open it in the browser and preview the Mini Program through the mobile browser.

      Important: When using a mobile phone for HTML5 preview, make sure that the mobile phone used for previewing is in the same network as the computer.

    • Computer browser preview: You can copy the URL at Local (as shown in the image below) and paste it into the browser of your computer to preview the Mini Program.

      local