Weex:Js与Native的交互

2017-01-18 本文已影响2460人 seph_von

介绍

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">
    ![](../img/scan.png)
    <text class="opera-menu-item-txt">扫一扫</text>
</div>
<div class="opera-menu-item" onclick="showToastWithMsg">
    ![](../img/qrcode.png)
    <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将回调方法中参数显示出来。

打印Log

由于测试的页面使用的是公司正在开发的页面，所以展示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将回调方法保存，之后在需用用到的地方添加调用回调方法。

先就大概这么多吧...