All Products
Search
Document Center

Customize bi-directional channels

Last Updated: Feb 05, 2021

If the existing Mini Program APIs or events cannot meet your development requirements, you can extend on demand.

Mini Program calls native custom API

  1. Customizes and registers API in client.

    • Customize API:

      1. public class MyJSApiPlugin extends H5SimplePlugin {
      2. /**
      3. * Customize API
      4. */
      5. public static final String TINY_TO_NATIVE = "tinyToNative";
      6. @Override
      7. public void onPrepare(H5EventFilter filter) {
      8. super.onPrepare(filter);
      9. // Add in onPrepare
      10. filter.addAction(TINY_TO_NATIVE);
      11. }
      12. @Override
      13. public boolean handleEvent(H5Event event, H5BridgeContext context) {
      14. String action = event.getAction();
      15. if (TINY_TO_NATIVE.equalsIgnoreCase(action)) {
      16. JSONObject params = event.getParam();
      17. String param1 = params.getString("param1");
      18. String param2 = params.getString("param2");
      19. JSONObject result = new JSONObject();
      20. result.put("success", true);
      21. result.put("message", "parameters received by client:" + param1 + ", " + param2 + "\n Return the current package name of Demo:" + context.getActivity().getPackageName());
      22. context.sendBridgeResult(result);
      23. return true;
      24. }
      25. return false;
      26. }
      27. }
    • Register API: Register the API once globally before starting the Mini Program.

      1. /*
      2. * 1st parameter: Defines the full path of the API
      3. * 2nd parameter: BundleName, fill "" if you adopt native AAR or mPaaS Inside accessing mode
      4. * 3rd parameter: Object on which the API works, you can fill "page" directly
      5. * 4th parameter: The API which works. Input the customized API in the form of String[]
      6. */
      7. MPNebula.registerH5Plugin(MyJSApiPlugin.class.getName(), "", "page", new String[]{MyJSApiPlugin.TINY_TO_NATIVE});
  2. Mini Program calls API.

    1. my.call('tinyToNative', {
    2. param1: 'p1aaa',
    3. param2: 'p2bbb'
    4. }, (result) => {
    5. console.log(result);
    6. my.showToast({
    7. type: 'none',
    8. content: result.message,
    9. duration: 3000,
    10. });
    11. })

Native project sends custom event to Mini Program

  1. Mini Program registers event.

    1. my.on('nativeToTiny', (res) => {
    2. my.showToast({
    3. type: 'none',
    4. content: JSON.stringify(res),
    5. duration: 3000,
    6. success: () => {
    7. },
    8. fail: () => {
    9. },
    10. complete: () => {
    11. }
    12. });
    13. })
  2. Client sends the event.

    1. H5Service h5Service = MPFramework.getExternalService(H5Service.class.getName());
    2. final H5Page h5Page = h5Service.getTopH5Page();
    3. if (null != h5Page) {
    4. JSONObject jo = new JSONObject();
    5. jo.put("key", value);
    6. // native project sends the event method to the mini program
    7. // 1st parameter refers to the event name; 2nd one refers to the parameter, 3rd one defaults to null
    8. h5Page.getBridge().sendDataWarpToWeb("nativeToTiny", jo, null);
    9. }

Unregister custom event

If the custom event is unnecessary and needs to be canceled, you can unregister the custom event. For details, see Unregister custom event.