Android 扩展

Weex 提供了扩展机制,可以根据自己的业务进行定制自己的功能。
主要分为两类扩展:

  • Module 扩展 非 UI 的特定功能。例如 sendHttp、openURL 等。
  • Component 扩展 实现特别功能的 Native 控件。例如:RichTextview,RefreshListview 等。
  • Adapter 扩展 Weex 对一些基础功能实现了统一的接口,可实现这些接口来定制自己的业务。例如:图片下载等。

Module 扩展

  1. Module 扩展必须继承 WXModule 类。
  2. 扩展方法必须加上@JSMethod (uiThread = false or true) 注解。Weex 会根据注解来判断当前方法是否要运行在 UI 线程,和当前方法是否是扩展方法。
  3. Weex是根据反射来进行调用 Module 扩展方法,所以Module中的扩展方法必须是 public 类型。
  4. 同样因为是通过反射调用,Module 不能被混淆。请在混淆文件中添加代码:-keep public class * extends com.taobao.weex.common.WXModule{*;}
  5. Module 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数
  6. 完成 Module 后一定要在初始化时注册 WXSDKEngine.registerModule("myModule", MyModule.class); 否则会报类似错误:ReportException :undefined:9: TypeError: Object #<Object> has no method 'printLog'

示例如下:

  1. publicclassMyModuleextendsWXModule{
  2. //run ui thread
  3. @JSMethod(uiThread =true)
  4. publicvoid printLog(String msg){
  5. Toast.makeText(mWXSDKInstance.getContext(),msg,Toast.LENGTH_SHORT).show();
  6. }
  7. //run JS thread
  8. @JSMethod(uiThread =false)
  9. publicvoid fireEventSyncCall(){
  10. //implement your module logic here
  11. }
  12. }

Register the module

  1. WXSDKEngine.registerModule("MyModule",WXEventModule.class);

JS 调用如下:

  1. <template>
  2. <div>
  3. <textonclick="click">testMyModule</text>
  4. </div>
  5. </template>
  6. <script>
  7. module.exports ={
  8. methods:{
  9. click:function(){
  10. weex.requireModule('myModule').printLog("I am a weex Module");
  11. }
  12. }
  13. }
  14. </script>

Component 扩展

  1. Component 扩展类必须集成 WXComponent.
  2. Component 对应的设置属性的方法必须添加注解 @WXComponentProp(name=value(value is attr or style of dsl))
  3. Weex sdk 通过反射调用对应的方法,所以 Component 对应的属性方法必须是 public,并且不能被混淆。请在混淆文件中添加代码 -keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}
  4. Component 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数
  5. 完成 Component 后一定要在初始化时注册 WXSDKEngine.registerComponent("richtext",RichText.class);

示例如下:

  1. publicclassRichTextextendsWXComponent{
  2. publicRichText(WXSDKInstance instance,WXDomObject dom,WXVContainer parent,boolean isLazy){
  3. super(instance, dom, parent, isLazy);
  4. }
  5. @Override
  6. protectedvoid initView(){
  7. mHost=newTextView(mContext);
  8. ((TextView)mHost).setMovementMethod(LinkMovementMethod.getInstance());
  9. }
  10. @WXComponentProp(name ="tel")
  11. publicvoid setTelLink(String tel){
  12. SpannableString spannable=newSpannableString(tel);
  13. spannable.setSpan(newURLSpan("tel:"+tel),0,tel.length(),Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
  14. ((TextView)mHost).setText(spannable);
  15. }
  16. }

注册你的组件:

  1. WXSDKEngine.registerComponent("MyView",MyViewComponent.class);

JS 调用如下:

  1. <template>
  2. <div>
  3. <richTexttel="12305"style="width:200;height:100">12305</richText>
  4. </div>
  5. </template>

组件方法支持

从WeexSDK 0.9.5开始,你可以定义组件方法

  • 在组件中如下声明一个组件方法

    1. @JSMethod
    2. publicvoid focus(){
    3. //method implementation
    4. }
  • 注册组之后,你可以在weex 文件中调用

    1. <template>
    2. <mycomponentref='mycomponent'></mycomponent>
    3. </template>
    4. <script>
    5. module.exports ={
    6. created:function(){
    7. this.$refs.mycomponent.focus();
    8. }
    9. }
    10. </script>

注:工程要添加依赖 compile 'com.squareup.picasso:picasso:2.5.2'

Adapter扩展

图片下载:

需要时集成接口 IWXImgLoaderAdapter,实现 setImage 方法。

示例如下:

  1. publicclassImageAdapterimplementsIWXImgLoaderAdapter{
  2. publicImageAdapter(){
  3. }
  4. @Override
  5. publicvoid setImage(finalString url,finalImageView view,
  6. WXImageQuality quality,WXImageStrategy strategy){
  7. WXSDKManager.getInstance().postOnUiThread(newRunnable(){
  8. @Override
  9. publicvoid run(){
  10. if(view==null||view.getLayoutParams()==null){
  11. return;
  12. }
  13. if(TextUtils.isEmpty(url)){
  14. view.setImageBitmap(null);
  15. return;
  16. }
  17. String temp = url;
  18. if(url.startsWith("//")){
  19. temp ="http:"+ url;
  20. }
  21. if(view.getLayoutParams().width <=0|| view.getLayoutParams().height <=0){
  22. return;
  23. }
  24. Picasso.with(WXEnvironment.getApplication())
  25. .load(temp)
  26. .into(view);
  27. }
  28. },0);
  29. }
  30. }

SDK混淆规则

若要在APP中使用混淆,请在相应的配置文件中添加如下规则:

  1. -keep class com.taobao.weex.WXDebugTool{*;}
  2. -keep class com.taobao.weex.devtools.common.LogUtil{*;}
  3. -keepclassmembers class**{
  4. @com.taobao.weex.ui.component.WXComponentProppublic*;
  5. }
  6. -keep class com.taobao.weex.bridge.**{*;}
  7. -keep class com.taobao.weex.dom.**{*;}
  8. -keep class com.taobao.weex.adapter.**{*;}
  9. -keep class com.taobao.weex.common.**{*;}
  10. -keep class*implements com.taobao.weex.IWXObject{*;}
  11. -keep class com.taobao.weex.ui.**{*;}
  12. -keep class com.taobao.weex.ui.component.**{*;}
  13. -keep class com.taobao.weex.utils.**{
  14. public<fields>;
  15. public<methods>;
  16. }
  17. -keep class com.taobao.weex.view.**{*;}
  18. -keep class com.taobao.weex.module.**{*;}
  19. -keep publicclass*extends com.taobao.weex.common.WXModule{*;}
  20. -keep publicclass*extends com.taobao.weex.ui.component.WXComponent{*;}
  21. -keep class*implements com.taobao.weex.ui.IExternalComponentGetter{*;}