介绍
weex的前端实现是通过Js+Css+Weex自定义组件完成的。那么事必存在Js与Native的扩展和交互存在。本文主要是基于weex官网一文完成的。这里记录一下，方便自己以后回顾。
Adapter
Weex为了尊重开发者的习惯，提供了几个适配接口，以方便开发者对图片加载库，网络加载库等自由选择适配。
- IWXImgLoaderAdapter图片适配器。
weex并没有实现图片加载，而是把加载图片的View和图片的url通过接口暴露出来，Native的开发者可以自己来实现图片的下载，缓存而与Native中的图片加载框架统一起来，避免重复导入图片加载库和图片库加载的冲突。
public class ImageAdapter implements IWXImgLoaderAdapter {
Context mContext;
private final static String BASE_URL = "http://99.48.58.53:8080/";
public ImageAdapter(Context context){
this.mContext = context;
}
/**
* @param url 图片地址，即在.we文件中的图片路径
* @param view 图片控件
* @param quality 图片质量：ORIGINAL（原始）、HIGH（高）、NORMAL（正常）、LOW（低）图片质量按序降低；默认为LOW
* @param strategy 图片加载策略，表示图片是否裁剪(isClipping)，锐化(isSharpen)，占位符(placeHolder)等。
*/
@Override
public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
// 这里使用Glide作为图片加载框架
/**
* 还要处理下url的地址.
* 因为在写weex页面的时候，我是用的相对路径来加载图片的，
* 这边传过来的路径也是相对的路径
*/
String tempurl = BASE_URL;
if(null!=url) {
if(url.startsWith("../")){
tempurl += url.substring(url.indexOf("/")+1);
}
Glide.with(mContext).load(tempurl).into(view);
}
}
}
修改图片加载的适配其实很简单，无论是Glide还是ImageLoader的配置跟Android Native 开发的配置是一样的。
这里主要需要注意的是就是要处理下图片的url，在开发页面的时候一般只会写相对路径，因此在做图片加载的时候一定要把相对路径修改成网络路径。如果是本地加载，那么图片地址需要注意，在处理的时候能够辨别出是在drawable还是在mipmap或者assets中。
对于本地图片的加载其实还有另一种方式是不通过我们自己实现的IMageAdapter的，那就是通过scheme为logcal的路径来区分本地图片；如local://test.png，WXImage中的源码如下：
public void setSrc(String src) {
if(src == null){
return ;
}
WXSDKInstance instance = getInstance();
Uri rewrited = instance.rewriteUri(Uri.parse(src),URIAdapter.IMAGE);
if(Constants.Scheme.LOCAL.equals(rewrited.getScheme())){
setLocalSrc(rewrited);
}else{
setRemoteSrc(rewrited);
}
}
走到setLocalSrc后，会根据路径后面的图片名称去drawable中查找，并通过image.setImageDrawable设置图片：
private void setLocalSrc(Uri rewrited){
Resources resources = getContext().getResources();
List<String> segments = rewrited.getPathSegments();
if(segments.size() != 1){
WXLogUtils.e("Local src format is invalid.");
return;
}
ImageView imageView;
int id = resources.getIdentifier(segments.get(0),"drawable",getContext().getPackageName());
if(id != 0 && (imageView = getHostView()) != null){
imageView.setImageDrawable(ResourcesCompat.getDrawable(resources,id,null));
}
}
- IWXHttpAdapter网络下载适配器
Weex提供了网络适配器本地的网络请求适配，开发可以自行实现网络请求。而请求的参数，请求头等Weex通过自定义的WXRequest封装提供了，请求返回后，则通过OnHttpListener进行回调通知。Weex默认提供的适配器是DefaultWXHttpAdapter，使用的是HttpURLConnection进行网络请求。
接口的定义如下：
public interface IWXHttpAdapter｛
void sendRequest(WXRequest request,OnHttpListener listener);
｝
通过DefaultWXHttpAdapter的源码可以了解网络请求是如何实现的。
public void sendRequest(final WXRequest request, final OnHttpListener listener) {
if (listener != null) {
listener.onHttpStart();
}
execute(new Runnable() {
@Override
public void run() {
WXResponse response = new WXResponse();
try {
HttpURLConnection connection = openConnection(request, listener);
Map<String,List<String>> headers = connection.getHeaderFields();
int responseCode = connection.getResponseCode();
if(listener != null){
listener.onHeadersReceived(responseCode,headers);
}
response.statusCode = String.valueOf(responseCode);
if (responseCode >= 200 && responseCode<=299) {
response.originalData = readInputStreamAsBytes(connection.getInputStream(), listener);
} else {
response.errorMsg = readInputStream(connection.getErrorStream(), listener);
}
if (listener != null) {
listener.onHttpFinish(response);
}
} catch (IOException|IllegalArgumentException e) {
e.printStackTrace();
response.statusCode = "-1";
response.errorCode="-1";
response.errorMsg=e.getMessage();
if(listener!=null){
listener.onHttpFinish(response);
}
}
}
});
WXSDKInstance中为默认的DefaultWXHttpAdapter实现了一个OnHttpListener，其中在onHttpFinish中实现了一些记录网络请求的性能数据，这个可以通过另一个适配器（IWXUserTrackAdapter
）扩展来获取这些数据；之后也通过Response的data对界面进行绘制。
- IWXUserTrackAdapter相关性能数据
接口定义如下：
public interface IWXUserTrackAdapter {
void commit(Context context, String eventId, String type, WXPerformance perf, Map<String, Serializable> params);
}
通过WXPerformance对象就可以获取到相关的数据，具体的可以DefaultWXHttpAdapter里实现的onHttpListener，在onHttpFinish中就记录了部分的性能数据。
Native与JS的通信
JS Call Native
JS对Native方法的调用，官网 已经描述得比较清楚了。主要有以下步骤：
- Native自定义类继承WXModule类。
- 供JS调用的方法必须加上
@WXModuleAnno的注释。（通过注解来判断当前方法是否为扩展方法，并是否运行在UI线程） - 扩展方法必须是public类型，weex通过反射来调用方法。
- 扩展类因为是通过反射的方法获取，因此不能被混淆，在混淆中添加
-keep public class * extends com.taobao.weex.common.WXModule{*;} - Module 扩展的方法可以使用int, double,float,String,Map,List类型参数
- 完成Module后，一定要在初始化时注册WXSDKEngine.registerModule("myModule",MyModule.class);否则会报类似错误：
ReportException :undefined:9: TypeError: Object #<Object> has no method 'printLog'
举个简单例子：
public class ToastModule extends WXModule{
@WXModuleAnno(runOnUIThread = true)
public void showToast(){
Toast.makeText(mWXSDKInstance.getContent(),"this is js call native toast",Toast.LENGTH_LONG).show();
}
@WXModuleAnno(runOnUIThread = true)
public void showToastWithMsg(String msg) {
Toast.makeText(mWXSDKInstance.getContent(),msg,Toast.LENGTH_LONG).show();
}
}
在weex的页面，实现如下：
<div class="opera-menu-item" onclick="showMsg">
<text class="opera-menu-item-txt">扫一扫</text>
</div>
<div class="opera-menu-item" onclick="showToastWithMsg">
<text class="opera-menu-item-txt">我的二维码</text>
</div>
methods:{
showMsg:function(){
var mtoast = require('@weex-module/toastModule');
mtoast.showToast();
},
showToastWithMsg:function(){
var mtoast = require('@weex-module/toastModule');
mtoast.showToastByMsg('this msg is from js ');
}
}
这样即可实现JS对Native方法的调用。
但是这样的调用还只是单方面的交互，JS调用Native后就没有下文了，我们更多的调用可能是调用Native后还有回调，那么回调是如何交互的呢？
事件回调
Native方法需要回调JS的方法时，在module实现的方法里添加一个入参JSCallback
@WXModuleAnno(runOnUIThread = false)
public void callTheCallback(JSCallback callback){
for(int i = 0;i<5;i++){
Log.i("weex","test call back -->"+i);
}
callback.invoke("show toast from callback");
}
Weex页面的JS中添加方法如下：
callTheCallback:function(){
var mtoast = require('@weex-module/toastModule');
mtoast.callTheCallback(function(event){
mtoast.showToastByMsg('msg from the callback:' + event);
});
}
这样就完成了一个回调：JS callTheCallback方法中调用了Native的方法callTheCallback，Native的Callback方法中先是打印了LOG，然后调用了JS的回调方法，并传了一个字符串参数，JS的回调方法中调用了Native的showToastByMsg将回调方法中参数显示出来。
由于测试的页面使用的是公司正在开发的页面，所以展示Toast的截图就不发出来了。
Native调用JS
方法一: WXSDKInstance提供了一个调用JS的方法
public void fireEvent(String elementRef,final String type,final Map<String,Object> data,final Map<String,Object> domChanges){...}
public void fireEvent(String elementRef,final String type, final Map<String, Object> data){
fireEvent(elementRef,type,data,null);
}
public void fireEvent(String elementRef, String type){
fireEvent(ref,type,new HashMap<String, Object>());
}
不过这个方法多用于某个自定义控件进行事件通知。<这个还不太熟，以后再说>
方法二：通过回调
可以在页面创建成功之后向Native添加回调方法，Native将回调方法保存，之后在需用用到的地方添加调用回调方法。
先就大概这么多吧...
