weex 和 native 的交互

先说一下 Android的扩展能力之module

一、module扩展 是用于weex和Android的数据交互。

有三点要注意的地方：
1、必须继承WXModule，并且不能被混淆
2、必须添加@JSMethod (uiThread = false or true) 注解，必须是public方法
3、module必须注册

数据交互就是通信。具体的厘子如下：

1、创建WeexCallBackModule类继承自 WXModule
2、创建两个方法

    方法1：call（String msg,JScallback callback） 带参数方法 根据注释可以看出，Android接收到weex的消息msg后，并给weex一个回复。
    方法2：jumpPage（）  无参数方法，功能是页面跳转。仅提供给weex调用，不回复信息。

public class WeexCallBackModule extends WXModule {

 /**
     * 用于module注册
     * @return 返回类名
     */
    public static String getLocalName(){
        return "WeexCallBackModule";
    }
 /**
     * 
     * @param msg 来自于weex 的参数
     * @param callback weex 回调接口
     */
    @JSMethod(uiThread = true)
    public void call(String msg, JSCallback callback){
        Log.d("nade", "call: 接收到weex="+msg);
        Toast.makeText(mWXSDKInstance.getContext(), "获取来自weex的数据"+msg, Toast.LENGTH_SHORT).show();
        callback.invoke("以收到weex端数据，回复告知。");
    }

    @JSMethod(uiThread = true)
    public void jumpPage(){
        mWXSDKInstance.getContext().startActivity(new Intent(mWXSDKInstance.getContext(), NavigatorActivity.class));
    }
}

 

3、注册module

WXSDKEngine.registerModule(WeexCallBackModule.getLocalName(),WeexCallBackModule.class);

二、Component 扩展 是用于weex和Android的ui交互。
说白了，Component 扩展就是Android自定义view交给weex使用的一种方式。

有三点要注意的地方：
1、必须继承WXComponent<View>，并指定View类型， 并且不能被混淆
2、必须添加@WXComponentProp(name = value ) 注解，value是属性值，提供给weex赋值使用。必须是public方法
3、Component 必须注册

参照官方写一个简单的富文本显示view

public class RichText extends WXComponent<TextView> {
    /**
     * 用于Component注册
     * @return 返回类名
     */
    public static String getLocalName() {
        return "RichText";
    }


    /**
     * 构造方法
     * @param instance
     * @param parent
     * @param basicComponentData
     */
    public RichText(WXSDKInstance instance, WXVContainer parent, BasicComponentData basicComponentData) {
        super(instance, parent, basicComponentData);
    }

    /**
     * 初始化view 定义view属性 并返回
     * @param context
     * @return
     */
    @Override
    protected TextView initComponentHostView(@NonNull Context context) {
        TextView view = new TextView(context);
        view.setTextSize(20);
        view.setTextColor(Color.BLUE);
        view.setBackground(context.getResources().getDrawable(R.drawable.richtextstyle));
        return view;
    }

    /**
     * 添加属性值 并设置显示。
     * @param telNumber weex 传递的需要显示的值
     */
    @WXComponentProp(name = "tel")
    public void setTel(String telNumber){
        getHostView().setText(telNumber);
    }

}

本文完。