weex实现js调native方法和native回调js方法
学习weex时发现js调native方法和native调js方法非常频繁,特此先来记录一下
tips: 我当前使用的weex版本是0.11 版本不同可能会有bug
- 自定义module 类继承 WXModule ,随便写一个方法,加上weex注解,如下
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
data = new HashMap<>(); data.put("x", "滴滴"); data.put("y", "叭叭"); callback.invoke(data); } }
解释下方法上面的注解
module中一旦被jsmoethod方法标注则表示这个方法可以再js中被回调,其中uiThread表示这个方法是否在ui线程中执行;
好了不啰嗦了,下面实现js中的内容
新建we文件,编写下面的代码
.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;
}
重点看下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属性下填写地址就可以了,同时如果要写远程服务器上的图片地址也是不会有影响的.