扩展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