weex实现js调native方法和native回调js方法
学习weex时发现js调native方法和native调js方法非常频繁，特此先来记录一下
tips: 我当前使用的weex版本是0.11 版本不同可能会有bug
- 自定义module 类继承 WXModule ,随便写一个方法,加上weex注解,如下
<pre>
package com.meijun.weextest;
import android.util.Log;
import android.widget.Toast;
import com.taobao.weex.annotation.JSMethod;
import com.taobao.weex.bridge.JSCallback;
import com.taobao.weex.common.WXModule;
import com.taobao.weex.common.WXModuleAnno;
import com.taobao.weex.utils.WXLogUtils;
import java.util.HashMap;
import java.util.Map;
public class MyModule extends WXModule {
private static final String TAG = "MyModule";
@JSMethod(uiThread = true)
public void testAsyncCall(String s, JSCallback callback) {
Log.e(TAG, "testAsyncCall: " + s);
WXLogUtils.e("WXComponentASynTest :" + Thread.currentThread().getName());
Map<String, String> data = new HashMap<>();
data.put("x", "滴滴");
data.put("y", "叭叭");
callback.invoke(data);
}
}
</pre>
解释下方法上面的注解
module中一旦被jsmoethod方法标注则表示这个方法可以再js中被回调,其中uiThread表示这个方法是否在ui线程中执行;
好了不啰嗦了,下面实现js中的内容
新建we文件,编写下面的代码
<pre>
<template>
<div>
<button onclick="didi" class="button" >
<text class="text">滴滴</text>
</button>
</div>
</template>
<style>
.button {
width: 450px;
margin-top: 30px;
margin-left: 150px;
padding-top: 20px;
padding-bottom: 20px;
border-width: 2px;
border-style: solid;
border-color: #DDDDDD;
background-color: #F5F5F5
}
.text {
font-size: 60px;
color: #666666;
text-align: center;
}
</style>
<script>
const modal = weex.requireModule('myModule')
export default {
methods: {
didi (event) {
modal.testAsyncCall("的点点滴滴",function( d ){
console.error('onclick:'+ d.x+ "-----" +d.y);
})
}
}
}
</script>
</pre>
重点看下script节点下的内容
第一行 const modal = weex.requireModule('myModule')
首先导入我们要使用的module,仔细看,我们导入的是myModule 并不是类名,为何这样导入,注意这里
我们首先要在Application类下注册这样module因为这样weex才知道到哪里去找这个module而注册的key值就是我们导入依赖填入的key值.
tips: 这里有个坑,切记要先初始化WXSDKEngine 再注册modle否则weex会报找
到这个方法的异常.
didi(event)代表点击滴滴之后会回调这个方法,程序执行到这里,接下来就会回到modal.testAsyncCall方法,这个方法的实现是native方法,执行后,参数"点点滴滴"和匿名函数传给native.我们看下执行结果.
在MyModule类中我们打印了js传过来的参数,接着我们回调js并且给js回传了数据
js中我们拿到了数据并打印出数据"滴滴叭叭".
`weex加载本地图片
官方文档中并没有告诉我们如何实现weex加载本地图
片,但是却给出了加载图片的接口,依据这个接口我们就可以实现加载本地的图片
我们重写imageadpter的setimage方法,此时我们可以拿到url 通过对url的判断如果使file:大头,我们认为他是要从本地读取文件,然后通过AndroidAPI拿到图片后直接给设置到imageview上.贴一下we文件中的处理
可见,我们直接在src属性下填写地址就可以了,同时如果要写远程服务器上的图片地址也是不会有影响的.
