#Weex与Android交互(一)

Posted on 2017-02-26 13:11  xl_phoenix  阅读(4714)  评论(0编辑  收藏  举报

用Weex开发Android程序

参考:开发HelloWorld程序(Weex开发)

1、创建Android工程
2、集成WeexSDK,参考[WEEX SDK 集成到 Android 工程](https://weex-project.io/cn/doc/advanced/integrate-to-android.html)
3、开发.we源码
4、编译.we源码为js文件,将js文件复制到Android工程的asset目录下
5、初始化sdk
6、实现渲染

WXSample地址 https://github.com/xkli/WXSample.git

Weex扩展到Android(自定义组件)

自定义组件(Android)

如何自定义 native 组件?

1.自定义组件必须继承自 WXComponent 或者 WXContainer ; 
2.weex SDK 可以识别 @WXComponentProp (name = value(value 是 attr 或者 dsl style)); 
3.方法必须是 public 的; 
4.组件类不能是一个内部类; 
5.自定义组件不能被 ProGuard 之类的工具混淆; 
6.组件方法在 UI 线程被调用,因此不要在里面进行耗时的操作; 
7.Weex 的参数类型可以是 int, double, float, String, Map, List 和实现了 WXObject 接口的自定义类;

参考以下例子:

	package com.taobao.weex.ui.component;
	// ……

public class  MyViewComponent extends WXComponent{

       public MyViewComponent(WXSDKInstance instance, WXDomObject node, 
                    WXVContainer parent,  String instanceId, boolean lazy) {                
           super(instance, node, parent, instanceId, lazy);
        }

       @Override
       protected void initView() {
          //TODO:your own code ……
       }

      @Override
      public WXFrameLayout getView() {
         //TODO:your own code ………        
      }
      @WXComponentProp(name=WXDomPropConstant.WX_ATTR_VALUE)
      public void setMyViewValue(String value) {
         ((TextView)mHost).setText(value);
      }

}

必须注册组件:

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

自定义原生API

如何自定义 native API?

Weex 的 SDK 只提供了页面渲染的能力,但是一些其它操作,比如网络请求、图片加载、重定向等功能需要你自己去实现,这个例子讲述了如何用原生代码去扩展 Weex 的功能。

关于 URLHelper 的例子

新建一个 WXModule

public class URLHelperModule extends WXModule{
    private static final String WEEX_CATEGORY="com.taobao.android.intent.category.WEEX";
    @JsMethod
    public void openURL(String url){
        if (TextUtils.isEmpty(url)) {
            return;
        }
        StringBuilder builder=new StringBuilder("http:");
        builder.append(url);
        Uri uri = Uri.parse(builder.toString());
        Intent intent = new Intent(Intent.ACTION_VIEW, uri);
        intent.addCategory(WEEX_CATEGORY);
        mWXSDKInstance.getContext().startActivity(intent);
    }
}

这里要注意 @JsMethod 这个注解,它表示了你把这个方法暴露给 JavaScript。

	public class URLHelperModule extends WXModule{

    @JsMethod
    public void openURL(String url,String callbackId){
        //...
        //callback to javascript 
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("ts", System.currentTimeMillis());
        WXBridgeManager.getInstance().callback(mWXSDKInstance.getInstanceId(), callbackId, result);
    }
}

把module注册到WXSDKEngine:

try {
     WXSDKEngine.registerModule("myURL", URLHelperModule.class);
     //'myURL' is the name you'll use in javascript
    } catch (WXException e) {
       WXLogUtils.e(e.getMessage());
    }

在 JavaScript 中使用 eventModule:

let URLHelper = require('@weex-module/myURL');//same as you registered
URLHelper.openURL("http://www.taobao.com",function(ts){
    console.log("url is open at "+ts);
});

一些注意事项:

定义一个 components 需要继承 WXModule
不要忘记添加 @WXModuleAnno 注解,不然 Weex 没法识别这个方法
定义的方法必须是 `public 的
module 类一定不能是内部类
你定义的 components 不能被混淆,不然会找不到
Module 中的方法会在 UI 线程中被调用,所以一定不要做一些耗时操作
Moudle 中的方法参数类型可以为 int,double,float,String,Map,List,以及实现 WXObject 接口的类。

Copyright © 2024 xl_phoenix
Powered by .NET 9.0 on Kubernetes