文档

自定义双向通道

更新时间:

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

小程序调用原生自定义 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});
    image.png
  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. 单击 Run,在真机上运行应用。

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

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

  7. 单击 自定义 API,打开自定义 API 界面。image.png

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

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

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

     my.on('nativeToTiny', (res) => {
       my.showToast({
         type: 'none',
         content: JSON.stringify(res),
         duration: 3000,
         success: () => {
         },
         fail: () => {
         },
         complete: () => {
         }
       });
     })
    image.png
  2. 在 Android Studio 中,修改 MainActivitymy_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. 单击 Run,在真机上运行应用。

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

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

  • 本页导读 (0)
文档反馈