Weex组件与模块封装（Android）

Weex组件

Android Studio配置

1. 在AndroidManifest.xml中添加网络权限等权限。

<uses-permission android:name="android.permission.INTERNET"/>//网络权限

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

//存储权限

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

<uses-permission android:name="android.permission.CAMERA"/>

//相机权限

2. 新建MyAplication继承Aplication类，在类中启动WXSDKEngine，用于渲染UI。

3. 其中ImageAdapter是一个自定义的类，用于加载图片。如何没有配置这个ImageAdapter，将无法显示图片。
   
4. 在MainActvity中渲染UI。

Weex原生组件开发

这里主要讲weex调用native方法以及native组件。主要有三种方式：module方式，componont方式（hander），adapter方式。

1. Module调用方式

1. Module 扩展必须继承 WXModule 类。
2. 扩展方法必须加上 @WXModuleAnno 注解或者@JSMethod注解。需要在vue中使用回调获得数据是使用后者。Weex 会根据注解来判断当前方法是否要运行在 UI 线程，和当前方法是否是扩展方法。
3. weex是根据反射来进行调用 Module 扩展方法，所以Module中的扩展方法必须是 public 类型。
4. Module扩展的方法可以使用 int, double, float, String, Map, List 类型的参数。
5. 完成Module 后一定要在初始化时注册 WXSDKEngine.registerModule("myModule", MyModule.class); 。

   需要回调获得数据的例子

传递参数的例子

在vue通过var module=weex.requirModule（‘moduleName’）获得对象可以调用其方法

2. Component调用方式

1. Component 扩展类必须集成 WXComponent.
2. 对应的设置属性的方法必须添加注解 @WXComponentProp(name=value)
3. Weex sdk通过反射调用对应的方法，所以 Component 对应的属性方法必须是 public。
4. 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数
5. 完成Component 后一定要在初始化时注册 WXSDKEngine.registerComponent("richtext",RichText.class);

示例如下:

注册：

注册完成后可以直接在vue中使用：

<looper data=”list”> </looper>

3. Adapter调用方式

  Weex 对一些基础功能实现了统一的接口，可实现这些接口来定制自己的业务。例如：图片加载，网络请求，存储管理等。图片加载是一个我们必须使用而weex没有实现的adapter，因此开发weex项目首先要实现对图片加载adapter的配置。

注册Adapter

三者使用情景：

module调用一般是在前端只是要调用native方法获得数据或者跳转界面时使用；component调用一般是在需要使用native组件（UI）时使用；adapter是在需要优化一些基础功能如图片加载，网络连接或者存储时需要使用。

一些需要注意的地方：

优化过场动画，过场和 console 容易引起 app 闪退 需要注意

降低 js <-> native 的通信频率

优化list结构，降低重排重绘压力(缓存和复用)