自定义双向通道

本文将引导您使用小程序的自定义双向通道功能。主要包含以下两部分内容：

• 小程序调用原生自定义 API

• 原生工程向小程序发送自定义事件

小程序调用原生自定义 API

1. 打开 Android Studio，创建 MyJSApiPlugin 类让其继承 H5SimplePlugin，实现自定义 H5 API。

      public class MyJSApiPlugin extends H5SimplePlugin {
   
          /**
           * 自定义 API
           */
          public static final String TINY_TO_NATIVE = "tinyToNative";
   
          @Override
          public void onPrepare(H5EventFilter filter) {
              super.onPrepare(filter);
              // onPrepare 中需要 add 进来
              filter.addAction(TINY_TO_NATIVE);
          }
   
          @Override
          public boolean handleEvent(H5Event event, H5BridgeContext context) {
              String action = event.getAction();
              if (TINY_TO_NATIVE.equalsIgnoreCase(action)) {
                  JSONObject params = event.getParam();
                  String param1 = params.getString("param1");
                  String param2 = params.getString("param2");
                  JSONObject result = new JSONObject();
                  result.put("success", true);
                  result.put("message", "客户端接收到参数：" + param1 + ", " + param2 + "\n返回 Demo 当前包名：" + context.getActivity().getPackageName());
                  context.sendBridgeResult(result);
                  return true;
              }
              return false;
          }
      }

2. 在 MyApplication 中注册 MyJSApiPlugin。

      /*
       * 第一个参数，自定义 API 类的全路径
       * 第二个参数，BundleName，aar/inside 可以直接填 ""
       * 第三个参数，作用于页面级，可以直接填 "page"
       * 第四个参数，作用的 API，将你自定义的 API 以 String[] 的形式传入
       */
    MPNebula.registerH5Plugin(MyJSApiPlugin.class.getName(), "", "page", new String[]{MyJSApiPlugin.TINY_TO_NATIVE});

   

3. 打开小程序开发者工具，在 page > API > tiny-to-native 下的 tiny-to-native.js 文件中添加如下代码实现小程序调用。

   Page({
   tinyToNative() {
    my.call('tinyToNative', {
      param1: 'p1aaa',
      param2: 'p2bbb'
    }, (result) => {
      console.log(result);
      my.showToast({
        type: 'none',
        content: result.message,
        duration: 3000,
      });
    })
   }
   });

4. 单击 ，在真机上运行应用。

5. 在真机运行的应用中，单击 Hello World! 启动小程序。

6. 单击 API 标签页，打开 API 界面。

7. 单击 自定义 API，打开自定义 API 界面。

8. 单击 点击触发自定义 API，会弹出一个 Toast，展示了客户端接收到的参数和当前 Demo 的包名信息。

原生工程向小程序发送自定义事件

1. 打开小程序开发者工具（IDE）中的 app.js 文件，添加小程序注册事件。

    my.on('nativeToTiny', (res) => {
      my.showToast({
        type: 'none',
        content: JSON.stringify(res),
        duration: 3000,
        success: () => {
        },
        fail: () => {
        },
        complete: () => {
        }
      });
    })

   

2. 在 Android Studio 中，修改 MainActivity 中 my_tv 的点击事件，向小程序端发送事件。

   public class MainActivity extends AppCompatActivity {
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.my_tv).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                MPNebula.startApp("2020092900000001");
                new Thread(new Runnable() {
                    @Override
                    public void run() {
                        for (int index = 0;index < 5;index++){
                            try {
                                Thread.sleep(5000);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }
                            final int i = index;
                            runOnUiThread(new Runnable() {
                                @Override
                                public void run() {
                                    H5Service h5Service = MPFramework.getExternalService(H5Service.class.getName());
                                    final H5Page h5Page = h5Service.getTopH5Page();
                                    if (null != h5Page) {
                                        JSONObject jo = new JSONObject();
                                        jo.put("key",i);
                                        // native 向小程序发送事件的方法
                                        // 第一个是事件名称，第二个是参数，第三个默认传 null
                                        h5Page.getBridge().sendDataWarpToWeb("nativeToTiny", jo, null);
                                    }
   
                                }
                            });
                        }
                    }
                }).start();
   
            }
   
        });
    }
   }

3. 单击 ，在真机上运行应用。

4. 在真机运行的应用中，单击 Hello World! 启动小程序。

5. 每隔 5 秒小程序会接收一个事件，以 Toast 的形式将传递的信息展现出来。