天天看点

weex android 交互,Weex和Android之间交互传递

最近阿里的weex又发布了,于是去看了下weex文档,然后开始撸码,但是本人不会js,踩了居多的坑。下面来撸下weex和nativie之间的数据交换。

据小白我的了解,weex和native交互有二种方式。1、用本地module的方式,让weex调用本地的代码。2、还是用本地的module的方法,利用JScallback的方式,将native的数据传给weex。下面就通过简单的撸一把demo

方式一:js调Native

通过weex的调用本地的module中的方法,并且利用本地的Toast显示数据。可以在文本框中输入数据,在native中得到数据。

test1.we的代码如下:

hello world

module.exports = {

data: {

},

methods: {

handler:function() {

require('@weex-module/testmodule').printLog("hello weex");

}

}

}

native代码:

1、本地需要新建一个类,名字叫LogModule继承WXModule

2、在LogModule的方法必须是public,方法头部加上 @@JSMethod注解。

3、在Application中注册module,或者在初始化的时候注册。

WXSDKEngine.registerModule("testmodule", TestModule.class);

注意:这里的注册名字,也就是"testmodule"和test1.we的 require('@weex-module/testmodule').printLog("hello weex");

中的testmodule需要一直,否则虽然js不会报错,但是却得不到效果。

public class TestModule extends WXModule {

@JSMethod

public void printLog(String str){

Toast.makeText(mWXSDKInstance.getContext(), str, Toast.LENGTH_SHORT).show();

}

}

最后得到结果,在Android手机上回吐司得到hello weex.

方法二:JSCallBack

利用JSCallBack的方式,将native的数据传给Weex。然后在weex做处理。

test2.we:

baidu

module.exports = {

data: {},

methods: {

callme:function() {

var mode=require('@weex-module/testmodule');

mode.printLogs("weex is beach",function (map){

//modal.toast({title:"wori",duration:2})

//console.log(map);

//调用nativie中的方法打日志,得出回调成功了

require('@weex-module/testmodule').log(map);

})

}

}

}

native中的代码:

和之前一个一样,我是吧三个方法写在一个module中了。

public class TestModule extends WXModule {

@JSMethod

public void printLog(String str){

Toast.makeText(mWXSDKInstance.getContext(), str, Toast.LENGTH_SHORT).show();

}

@JSMethod

public void printLogs(String str, JSCallback callback){

Toast.makeText(mWXSDKInstance.getContext(), str, Toast.LENGTH_SHORT).show();

Map map = new HashMap<>();

map.put("caicai", "my");

callback.invokeAndKeepAlive(map);

//callback.invoke(map);

}

@JSMethod

public void log(String str){

Log.e("123", str);

}

}

1、callback.invokeAndKeepAlive(map);该方法可以调用多次

callback.invoke(map);该方法只会调用一次。

最终结果:

weex android 交互,Weex和Android之间交互传递

Paste_Image.png