weex實(shí)現(xiàn)js調(diào)native方法和native回調(diào)js方法
學(xué)習(xí)weex時(shí)發(fā)現(xiàn)js調(diào)native方法和native調(diào)js方法非常頻繁限府，特此先來(lái)記錄一下
tips: 我當(dāng)前使用的weex版本是0.11 版本不同可能會(huì)有bug
- 自定義module 類繼承 WXModule ,隨便寫(xiě)一個(gè)方法,加上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方法標(biāo)注則表示這個(gè)方法可以再js中被回調(diào),其中uiThread表示這個(gè)方法是否在ui線程中執(zhí)行;
好了不啰嗦了,下面實(shí)現(xiàn)js中的內(nèi)容
新建we文件,編寫(xiě)下面的代碼
<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("的點(diǎn)點(diǎn)滴滴",function( d ){
console.error('onclick:'+ d.x+ "-----" +d.y);
})
}
}
}
</script>
</pre>
重點(diǎn)看下script節(jié)點(diǎn)下的內(nèi)容
第一行 const modal = weex.requireModule('myModule')
首先導(dǎo)入我們要使用的module,仔細(xì)看,我們導(dǎo)入的是myModule 并不是類名,為何這樣導(dǎo)入,注意這里
我們首先要在Application類下注冊(cè)這樣module因?yàn)檫@樣weex才知道到哪里去找這個(gè)module而注冊(cè)的key值就是我們導(dǎo)入依賴填入的key值.
tips: 這里有個(gè)坑,切記要先初始化WXSDKEngine 再注冊(cè)modle否則weex會(huì)報(bào)找
到這個(gè)方法的異常.
didi(event)代表點(diǎn)擊滴滴之后會(huì)回調(diào)這個(gè)方法,程序執(zhí)行到這里,接下來(lái)就會(huì)回到modal.testAsyncCall方法,這個(gè)方法的實(shí)現(xiàn)是native方法,執(zhí)行后,參數(shù)"點(diǎn)點(diǎn)滴滴"和匿名函數(shù)傳給native.我們看下執(zhí)行結(jié)果.
在MyModule類中我們打印了js傳過(guò)來(lái)的參數(shù),接著我們回調(diào)js并且給js回傳了數(shù)據(jù)
js中我們拿到了數(shù)據(jù)并打印出數(shù)據(jù)"滴滴叭叭".
`weex加載本地圖片
官方文檔中并沒(méi)有告訴我們?nèi)绾螌?shí)現(xiàn)weex加載本地圖
片,但是卻給出了加載圖片的接口,依據(jù)這個(gè)接口我們就可以實(shí)現(xiàn)加載本地的圖片
我們重寫(xiě)imageadpter的setimage方法,此時(shí)我們可以拿到url 通過(guò)對(duì)url的判斷如果使file:大頭,我們認(rèn)為他是要從本地讀取文件,然后通過(guò)AndroidAPI拿到圖片后直接給設(shè)置到imageview上.貼一下we文件中的處理
可見(jiàn),我們直接在src屬性下填寫(xiě)地址就可以了,同時(shí)如果要寫(xiě)遠(yuǎn)程服務(wù)器上的圖片地址也是不會(huì)有影響的.
