All Products
Search
Document Center

Customize bi-directional channel

Last Updated: Apr 06, 2021

This article guides you to use the bi-directional channel function of the mini program. It contains the following 2 parts:

Mini program calls native custom API

  1. Open Android Studio and create MyJSApiPlugin class (), make it inherit H5SimplePlugin to implement custom H5 API.

       
    1. public class MyJSApiPlugin extends H5SimplePlugin {
    2. /**
    3. * Custom 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 needs to be added
    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", "Parameter received by the 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. }
  2. Register MyJSApiPlugin in MyApplication.
       
    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});
    56
  3. Open the mini program development tool, add the following code into the tiny-to-native.js file under page > API > tiny-to-native to realize the call of the mini program.
       
    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. Click Run to run the application on real device.
  5. In the application running on the real device, tap Hello World! to start up the mini program.
  6. Tap API tab () to open the API page.
  7. Tap Custom API to open the custom API page.
  8. Tap Tap to triger custom API button, a toast pops up to show the parameter and the current Demo packagename received by the client.

Native project sends custom event to mini program

  1. Open the app.js file in the mini program development tool (IDE) to add mini program registration 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. })
    61
  2. In Android Studio, modify the my_tv tap event in MainActivity to send event to mini program.

       
    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. // The method that Native send events to Mini Program
    29. // The first field is event name, the second is the parameter, the third is null by default
    30. h5Page.getBridge().sendDataWarpToWeb("nativeToTiny", jo, null);
    31. }
    32. }
    33. });
    34. }
    35. }
    36. }).start();
    37. }
    38. });
    39. }
    40. }
  3. Click Run to run the application on real device.
  4. In the application running on the real device, tap Hello World! to start up the mini program.
  5. The mini program receives an event in every 5 seconds, and the passed information is displayed in a toast.