Weex與Android交互（二）

擴展Android

Weex 提供了擴展機制，可以根據自己的業務進行定制自己的功能。

主要分為兩類擴展：

Module 擴展 非UI的特定功能。例如sendHttp、openURL 等。
Component 擴展 實現特別功能的Native控件。例如：RichTextview，RefreshListview等。
Adapter 擴展 Weex 對一些基礎功能實現了統一的接口，可實現這些接口來定制自己的業務。例如：圖片下載等。

Module 擴展

Module擴展必須繼承WXModule類。
擴展方法必須加上@JsMethod 注解。Weex會根據注解來判斷當前方法是否要運行在UI線程，和當前方法是否是擴展方法。
Weex是根據反射來進行調用Module擴展方法，所以Module中的擴展方法必須是public類型。
同樣因為是通過反射調用，Module不能被混淆。請在混淆文件中添加代碼：-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 MyModule extends WXModule {

  @JsMethod(runOnUIThread = true)
  public void printLog(String msg) {
    Toast.makeText(mWXSDKInstance.getContext(),msg,Toast.LENGTH_SHORT).show();
  }
}

JS 調用如下：

<template>
  <div>
    <text onclick="click">點擊我測試</text>
  </div>
</template>

	<script>
  	module.exports = {
    	methods: {
     	 click: function() {
        	require('@weex-module/myModule').printLog("我是一個測試!");
      	}
    	}
  	}
</script>

Component 擴展

Component 擴展類必須集成WXComponent.
Component 對應的設置屬性的方法必須添加注解@WXComponentProp(name=value(value is attr or style of dsl))
Weex sdk 通過反射調用對應的方法，所以Component對應的屬性方法必須是public，並且不能被混淆。請在混淆文件中添加代碼 -keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}
Component 擴展的方法可以使用int, double, float, String, Map, List 類型的參數
完成Component后一定要在初始化時注冊 WXSDKEngine.registerComponent("richtext",RichText.class);

示例如下:

public class RichText extends WXComponent {

  public RichText(WXSDKInstance instance, WXDomObject dom, WXVContainer parent, boolean isLazy) {
    super(instance, dom, parent, isLazy);
  }

  @Override
  protected void initView() {
    mHost=new TextView(mContext);
    ((TextView)mHost).setMovementMethod(LinkMovementMethod.getInstance());
  }

  @WXComponentProp(name = "tel")
  public void setTelLink(String tel){
    SpannableString spannable=new SpannableString(tel);
    spannable.setSpan(new URLSpan("tel:"+tel),0,tel.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    ((TextView)mHost).setText(spannable);
  }
}

JS 調用如下：

<template>
  <div>
    <richText tel="12305" style="width:200;height:100">12305</text>
  </div>
</template>

Adapter擴展

圖片下載： 需要時集成接口IWXImgLoaderAdapter，實現setImage 方法。 示例如下：

public class ImageAdapter implements IWXImgLoaderAdapter {

  public ImageAdapter() {
  }

  @Override
  public void setImage(final String url, final ImageView view,
                       WXImageQuality quality, WXImageStrategy strategy) {

    WXSDKManager.getInstance().postOnUiThread(new Runnable() {

      @Override
      public void run() {
        if(view==null||view.getLayoutParams()==null){
          return;
        }
        if (TextUtils.isEmpty(url)) {
          view.setImageBitmap(null);
          return;
        }
        String temp = url;
        if (url.startsWith("//")) {
          temp = "http:" + url;
        }
        if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) {
          return;
        }
        Picasso.with(WXEnvironment.getApplication())
            .load(temp)
            .into(view);
      }
    },0);
  }
}

注:工程要添加依賴

compile 'com.squareup.picasso:picasso:2.5.2'

以下兩個網址為擴展示例

https://github.com/weexteam/article/issues/28
https://github.com/weexteam/article/issues/27