weexteam / article

This repos is a third party collection, and is not developed nor maintained by Apache Weex.
1.22k stars 141 forks source link

如何在原生代码里获取前端创建的Module实例 #194

Open hellokugo opened 6 years ago

hellokugo commented 6 years ago

如题,在android创建的Module实例,我想在里面添加回调函数,在原生代码里面如何获取这个实例呢?

zhuanghongji commented 6 years ago

不知道你具体指的是不是这个,直接回答下:

举个栗子:

Native 方法需要回调 JS 的方法时,在 module 实现的方法里添加一个入参 JSCallback

@WXModuleAnno(runOnUIThread = false)
public void callTheCallback(JSCallback callback){
  for(int i = 0;i<5;i++){
    Log.i("weex","test call back -->"+i);
  }
  callback.invoke("show toast from callback");
}

Weex 页面的 JS 中添加方法如下:

callTheCallback:function(){
    var mtoast = require('@weex-module/toastModule');
    mtoast.callTheCallback(function(event){
        mtoast.showToastByMsg('msg from the callback:' + event);
    });
}

这样就完成了一个回调:JS callTheCallback 方法中调用了 Native 的方法 callTheCallback,Native 的Callback 方法中先是打印了 LOG,然后调用了 JS 的回调方法,并传了一个字符串参数,JS 的回调方法中调用了 Native 的 showToastByMsg 将回调方法中参数显示出来。

注:上述内容截取自 Weex:Js与Native的交互,且代码语法有点老旧,但用法是类似的,建议在这个基础上参考官方文档。