Mini Program IDE supports real-device preview and debugging, so you can preview the actual effect of the current code or debug on your mobile client. This topic describes how to preview and debug a mini program on a physical device, and describes the APIs used in the process.
Prerequisites
Before you use the preview and debugging feature, make sure that you have integrated this feature into your Android mini program. For information about how to integrate this feature, see MriverDebug API.
Procedure
Open the Mini Program IDE configuration file named
config.jsonthat you downloaded from the mPaaS console and find thedebug_urlfield.An example configuration file is as follows:{ "login_url":"https://mappcenter.cloud.alipay.com/ide/login", "uuid_url":"http://cn-hangzhou-mproxy.cloud.alipay.com/switch/uuid", "debug_url":"wss://cn-hangzhou-mproxy.cloud.alipay.com", "sign":"3decfd66c2924489204b4b0f38a9c228", "upload_url":"https://mappcenter.cloud.alipay.com/ide/mappcenter/mds" }Set the debugging address through
setWssHostand add/host/at the end. The example is as follows.MriverDebug.setWssHost("wss://cn-hangzhou-mproxy.cloud.alipay.com/host/");Click Preview or Real Device Debugging in the upper right corner of the IDE.
The IDE will generate a
.zippackage of the current code and upload it to the console.The console automatically creates a publishing task, generates a QR code and returns it to the IDE.
NoteFailure to properly set up the whitelist may cause QR code building and generation to fail. See Whitelist settings for more information.
Use the mobile client to scan the QR code displayed in the IDE. After scanning the code, the console will be triggered to deliver the mini program package. The QR code is valid for 15 minutes, and a refresh button will be displayed after timeout.
After the mobile client receives the mini program package, it can enter the preview or debugging interface on the mobile client.
APIs
The following section describes the APIs and parameters used during preview and debugging, and provides sample code.
MriverDebug.debugAppByScan(Activity activity)
This API is used for preview and debugging. Use mPaaS's built-in code scanning and preview mini programs.
Sample code
MriverDebug.debugAppByScan(MainActivity.this);Parameter description
Parameter | Type | Description | Required |
activity | Activity | The current activity. | Yes |
MriverDebug.debugAppByUri(Activtiy activity,Uri uri)
This interface is used to jump to the mini program. It is recommended to jump to the activity of the page where the mini program is started.
Sample code
MriverDebug.debugAppByUri(MainActivity.this,intent.getData()); Parameter description
Parameter | Type | Description | Required |
activity | Activity | The current activity. | No (but we recommend you specify it) |
uri | Uri | The data returned by scanning the QR code. | No |