#Weex与Android交互(一)

时间:2022-07-01 03:19:27

用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 接口的类。