Mobile Platform as a Service:Send custom message to custom View

Send an actionType-dispatched message from mini program JavaScript to a native View component registered on the host side, using the mPaaS custom component context API.

To send a message from the mini program to a native View, complete the three steps below. The mini program side creates a context object and calls postMessage; the native side implements onReceivedMessage to handle the payload.

Step 1: Create a custom View context

Call my.createMpaasCustomComponentContext with the id value of the target native component in the mini program template. The returned context object is the communication handle for that component.

In the example below, 'mpaas-map' matches the id attribute set on the component in the mini program template. Replace it with the actual id you registered on the native side.

this.context = my.createMpaasCustomComponentContext('mpaas-map');

Step 2: Send a message to the native client

Call postMessage on the context object. Pass an object with two fields:

• actionType — the event name the native client listens for (a string you define on both sides)

• data — an object containing any additional parameters for the native handler

  this.context.postMessage({
    actionType: 'setColor',
    data: {
      "color": "#FF00FF00"
    }
  });

The actionType string is the contract between the mini program and the native component. Both sides must use the same value for a message to be dispatched correctly.

Step 3: Receive and handle the message on the native side

Override onReceivedMessage in your MPBaseEmbedView subclass. The method provides three parameters:

• actionType — the event name sent by the mini program

• data — the extension parameters as a JSONObject

• bridgeContext — the H5 bridge context (available if needed, can be ignored)

Dispatch on actionType to run the appropriate logic for each message type.

public class MyTestEmbedView extends MPBaseEmbedView {
    ···
    @Override
    public void onReceivedMessage(String actionType, JSONObject data, H5BridgeContext bridgeContext) {
        LoggerFactory.getTraceLogger().debug(TAG, "onReceivedMessage, actionType: " + actionType + ", data: " + data.toString());
        if ("setColor".equals(actionType)) {
            mRealView.setColor(Color.parseColor(data.getString("color")));
        }
    }
    ···
}