最近阿里的weex又发布了，于是去看了下weex文档，然后开始撸码，但是本人不会js，踩了居多的坑。下面来撸下weex和nativie之间的数据交换。
据小白我的了解，weex和native交互有二种方式。1、用本地module的方式，让weex调用本地的代码。2、还是用本地的module的方法，利用JScallback的方式，将native的数据传给weex。下面就通过简单的撸一把demo
方式一：js调Native
通过weex的调用本地的module中的方法，并且利用本地的Toast显示数据。可以在文本框中输入数据，在native中得到数据。
test1.we的代码如下：
<template>
<div>
<text onclick="handler">hello world</text>
</div>
</template>
<script>
module.exports = {
data: {
},
methods: {
handler:function() {
require('@weex-module/testmodule').printLog("hello weex");
}
}
}
</script>
<style>
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:
<template>
<div>
<text style="font-size: 50px; color: chocolate" onclick="callme">baidu</text>
</div>
</template>
<script>
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);
})
}
}
}
</script>
<style>
</style>
native中的代码：
和之前一个一样，我是吧三个方法写在一个module中了。
public class TestModule extends WXModule {
@JSMethod
public void printLog(String str){
Toast.makeText(mWXSDKInstance.getContext(), str, Toast.LENGTH_SHORT).show();
}
/*****jscallback*****/
@JSMethod
public void printLogs(String str, JSCallback callback){
Toast.makeText(mWXSDKInstance.getContext(), str, Toast.LENGTH_SHORT).show();
Map<String, Object> 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);该方法只会调用一次。
最终结果：
Paste_Image.png
