Weex 提供了扩展机制,可以根据自己的业务进行定制自己的功能。 主要分为两类扩展:
Map<String, Object> options = new HashMap(); options.set("testVlaue","hello"); //.... instance.render(pagename, template,options);
var value = weex.config.testValue; console.log(value);
@JSMethod (uiThread = false or true)
注解。Weex 会根据注解来判断当前方法是否要运行在 UI 线程,和当前方法是否是扩展方法。-keep public class * extends com.taobao.weex.common.WXModule{*;}
WXSDKEngine.registerModule("myModule", MyModule.class);
否则会报类似错误:ReportException :undefined:9: TypeError: Object #<Object> has no method 'printLog'
示例如下:
public class MyModule extends WXModule { //run ui thread @JSMethod (uiThread = true) public void printLog(String msg) { Toast.makeText(mWXSDKInstance.getContext(),msg,Toast.LENGTH_SHORT).show(); } //run JS thread @JSMethod (uiThread = false) public void fireEventSyncCall(){ //implement your module logic here } }
Register the module
WXSDKEngine.registerModule("MyModule", MyModule.class);
JS 调用如下:
<template> <div> <text onclick="click">testMyModule</text> </div> </template> <script> module.exports = { methods: { click: function() { weex.requireModule('MyModule').printLog("I am a weex Module"); } } } </script>
registerModule(moduleName,moduleClass)
return
(bool): 是否注册成功moduleName
(String): 模块名称moduleClass
(Class): 模块对应的class,创建module实例时使用使用方式:
WXSDKEngine.registerModule("picker", WXPickersModule.class);
WXDomObject 和 Layout 引擎被下沉到 WeexCore 中使用 C++ 实现,移除 Java 代码中的 WXDomObject。此次变更涉及 WXComponent 和 WXDomObject 的适配。
WXDomObject 中的 setMeasureFunction() 方法迁移至 WXComponent 中:
protected void setMeasureFunction(final ContentBoxMeasurement contentBoxMeasurement);
详见:com.taobao.weex.layout.ContentBoxMeasurement.java
ContentBoxMeasurement 示例请参考:WXText.java / setMeasureFunction() 注意:ContentBoxMeasurement 只支持叶子节点。
由于 WXDomObject 下沉至 WeexCore 中,所以 getDomObject() 方法已被删除。
WXComponent 的构造方法删除了类型为 WXDomObject 的参数,新增了类型为 BasicComponentData 的参数,其余参数保持不变:
public WXComponent(WXSDKInstance instance, WXVContainer parent, int type, BasicComponentData basicComponentData); public WXComponent(WXSDKInstance instance, WXVContainer parent, BasicComponentData basicComponentData);
你无法在Java代码中访问和继承 WXDomObject,( ImmutableDomObject 接口也已被删除)
WXDomObject 的部分方法被迁移至 WXComponent中,如需使用,如下:
WXDomObject 中 的 getType() 方法用于获取组件类型(如:list、div、text、img...),迁移到 WXComponent 后,更名为:
public String getComponentType();
获取 Layout 结果的6个方法从 WXDomObject 迁移至 WXComponent:
public float getCSSLayoutTop(); public float getCSSLayoutBottom(); public float getCSSLayoutLeft(); public float getCSSLayoutRight(); public float getLayoutWidth(); public float getLayoutHeight();
移除两个废弃接口:
public float getLayoutY(); public float getLayoutX();
-keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}
WXSDKEngine.registerComponent("richText", RichText.class);
示例如下:
public class RichText extends WXComponent<TextView> { public RichText(WXSDKInstance instance, WXDomObject dom, WXVContainer parent) { super(instance, dom, parent); } @Override protected TextView initComponentHostView(@NonNull Context context) { TextView textView = new TextView(context); textView.setTextSize(20); textView.setTextColor(Color.BLACK); return textView; } @WXComponentProp(name = "tel") public void setTel(String telNumber) { getHostView().setText("tel: " + telNumber); } }
注册你的组件:
WXSDKEngine.registerComponent("richText", RichText.class);
JS 调用如下:
<template> <div> <richText tel="12305" style="width:200;height:100">12305</richText> </div> </template>
从WeexSDK 0.9.5开始,你可以定义组件方法
@JSMethod public void focus(){ //method implementation }
注册组之后,你可以在weex 文件中调用
<template> <mycomponent ref='mycomponent'></mycomponent> </template> <script> module.exports = { created: function() { this.$refs.mycomponent.focus(); } } </script>
注:工程要添加依赖 compile 'com.squareup.picasso:picasso:2.5.2'
return
(bool): 是否注册成功type
(String): 前端使用的对应标签class
(Class): 组件的class,在创建组件实例时调用appendTree
(bool): 渲染时判定逻辑,默认false使用方式:
WXSDKEngine.registerComponent("video", WXVideo.class, false);
return
(bool): 是否注册成功holder
(IFComponentHolder): 用于创建component的抽象工厂,默认使用__SimpleComponentHolder__。appendTree
: 同上names
(String ...): 前端使用的对应标签使用方式:
WXSDKEngine.registerComponent( new SimpleComponentHolder( WXText.class, new WXText.Creator() ), false, "text" );
需要时集成接口 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); } }
WEEX和图片库完全解耦,WEEX的图片加载,都是通过调用公共接口,由实现类决定调用哪个图片库
IWXImgLoaderAdapter
: 根据url,load图片给某个viewIDrawableLoader
(可选): 根据url,load图片给某个drawable.public interface IWXImgLoaderAdapter { void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy); }
WXImageQuality
图片质量的设置参数,有 LOW
, NORMAL
, HIGH
, ORIGINAL
几种质量,默认为LOW
.WXImageStrategy
是一个扩展类参数,配置图像是否可以剪切isClipping
、锐化isSharpen
以及配置占位符placeHolder
interface DrawableTarget { } interface StaticTarget extends DrawableTarget{ void setDrawable(@Nullable Drawable drawable, boolean resetBounds); } interface AnimatedTarget extends DrawableTarget{ void setAnimatedDrawable(@Nullable Drawable drawable); } void setDrawable(String url, DrawableTarget drawableTarget, DrawableStrategy drawableStrategy); }
同ImageAdapter
,WEEX和网络库也是解耦的,通过接口形式调用,由实现类决定调用哪个网络库。
public interface IWXHttpAdapter { void sendRequest(WXRequest request, OnHttpListener listener); }
paramMap
(Map<String, String>): http自定义请求参数,比如(?a=1&b=2);url
(String): http请求的目标urlmethod
(String): http请求方法 “post”,“get”body
(String): http请求bodytimeoutMs
(int): 请求超时时间,默认是3sinstanceId
(String): (页面)idinterface OnHttpListener { /** * 开始请求 */ void onHttpStart(); /** * 收到http header内容 */ void onHeadersReceived(int statusCode,Map<String,List<String>> headers); /** * * @param 上传进度 */ void onHttpUploadProgress(int uploadProgress); /** * * @param loadedLength 接收到的数据长度 */ void onHttpResponseProgress(int loadedLength); /** * 请求结束 * @param response 返回的response */ void onHttpFinish(WXResponse response); }
打点相关,如果关注weex的打点,需要实现这个adapter
public interface IWXUserTrackAdapter { void commit(Context context, String eventId, String type, WXPerformance perf, Map<String, Serializable> params); }
WXNavigatorModule
的实现依赖这个接口,用来操作navigation.
使用方式:
WXSDKEngine.setActivityNavBarSetter(new IActivityNavBarSetter(){});
WXStorageModule
实现依赖这个接口,用来实现数据的存、取默认使用DefaultWXStorage
实现
WEEX的异常上报接口,包括
public interface IWXJSExceptionAdapter { void onJSException(WXJSExceptionInfo exception); }
使用方式:
WXSDKEngine.setJSExcetptionAdapter(new TestExceptionAdapter());
若要在APP中使用混淆,请在相应的配置文件中添加如下规则:
-keep class com.taobao.weex.WXDebugTool{*;} -keep class com.taobao.weex.devtools.common.LogUtil{*;} -keepclassmembers class ** { @com.taobao.weex.ui.component.WXComponentProp public *; } -keep class com.taobao.weex.bridge.**{*;} -keep class com.taobao.weex.dom.**{*;} -keep class com.taobao.weex.adapter.**{*;} -keep class com.taobao.weex.common.**{*;} -keep class * implements com.taobao.weex.IWXObject{*;} -keep class com.taobao.weex.ui.**{*;} -keep class com.taobao.weex.ui.component.**{*;} -keep class com.taobao.weex.utils.**{ public <fields>; public <methods>; } -keep class com.taobao.weex.view.**{*;} -keep class com.taobao.weex.module.**{*;} -keep public class * extends com.taobao.weex.common.WXModule{*;} -keep public class * extends com.taobao.weex.ui.component.WXComponent{*;} -keep class * implements com.taobao.weex.ui.IExternalComponentGetter{*;}