全部产品

自定义双向通道

更新时间:2021-03-11 14:46:16

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

小程序调用原生自定义 API

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

    1. public class MyJSApiPlugin extends H5SimplePlugin {
    2. /**
    3. * 自定义 API
    4. */
    5. public static final String TINY_TO_NATIVE = "tinyToNative";
    6. @Override
    7. public void onPrepare(H5EventFilter filter) {
    8. super.onPrepare(filter);
    9. // onPrepare 中需要 add 进来
    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", "客户端接收到参数:" + param1 + ", " + param2 + "\n返回 Demo 当前包名:" + context.getActivity().getPackageName());
    22. context.sendBridgeResult(result);
    23. return true;
    24. }
    25. return false;
    26. }
    27. }
  2. MyApplication 中注册 MyJSApiPlugin

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

    56

  3. 打开小程序开发者工具,在 page > API > tiny-to-native 下的 tiny-to-native.js 文件中添加如下代码实现小程序调用。
    1. Page({
    2. tinyToNative() {
    3. my.call('tinyToNative', {
    4. param1: 'p1aaa',
    5. param2: 'p2bbb'
    6. }, (result) => {
    7. console.log(result);
    8. my.showToast({
    9. type: 'none',
    10. content: result.message,
    11. duration: 3000,
    12. });
    13. })
    14. }
    15. });
  4. 单击 Run,在真机上运行应用。
  5. 在真机运行的应用中,单击 Hello World! 启动小程序。
  6. 单击 API 标签页),打开 API 界面。
  7. 单击 自定义 API,打开自定义 API 界面。
  8. 单击 点击触发自定义 API,会弹出一个 Toast,展示了客户端接收到的参数和当前 Demo 的包名信息。

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

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

    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. })

    61

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

    1. public class MainActivity extends AppCompatActivity {
    2. @Override
    3. protected void onCreate(Bundle savedInstanceState) {
    4. super.onCreate(savedInstanceState);
    5. setContentView(R.layout.activity_main);
    6. findViewById(R.id.my_tv).setOnClickListener(new View.OnClickListener() {
    7. @Override
    8. public void onClick(View v) {
    9. MPNebula.startApp("2020092900000001");
    10. new Thread(new Runnable() {
    11. @Override
    12. public void run() {
    13. for (int index = 0;index < 5;index++){
    14. try {
    15. Thread.sleep(5000);
    16. } catch (InterruptedException e) {
    17. e.printStackTrace();
    18. }
    19. final int i = index;
    20. runOnUiThread(new Runnable() {
    21. @Override
    22. public void run() {
    23. H5Service h5Service = MPFramework.getExternalService(H5Service.class.getName());
    24. final H5Page h5Page = h5Service.getTopH5Page();
    25. if (null != h5Page) {
    26. JSONObject jo = new JSONObject();
    27. jo.put("key",i);
    28. // native 向小程序发送事件的方法
    29. // 第一个是事件名称,第二个是参数,第三个默认传 null
    30. h5Page.getBridge().sendDataWarpToWeb("nativeToTiny", jo, null);
    31. }
    32. }
    33. });
    34. }
    35. }
    36. }).start();
    37. }
    38. });
    39. }
    40. }
  3. 单击 Run,在真机上运行应用。
  4. 在真机运行的应用中,单击 Hello World! 启动小程序。
  5. 每隔 5 秒小程序会接收一个事件,以 Toast 的形式将传递的信息展现出来。