版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33718648/article/details/79885400
Weex组件
Android Studio配置
-
在Android Manifest.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"
/>
//相机权限
-
新建MyAplication继承Aplication类,在类中启动WXSDKEngine,用于渲染UI。
-
其中ImageAdapter是一个自定义的类,用于加载图片。如何没有配置这个ImageAdapter,将无法显示图片。
-
在MainActvity中渲染UI。
Weex原生组件开发
这里主要讲weex调用native方法以及native组件。主要有三种方式:module方式,componont方式(hander),adapter方式。
-
Module 调用方式
-
Module 扩展必须继承 WXModule 类。
-
扩展方法必须加上 @WXModuleAnno 注解或者@JSMethod注解。需要在vue中使用回调获得数据是使用后者。Weex 会根据注解来判断当前方法是否要运行在 UI 线程,和当前方法是否是扩展方法。
-
weex 是根据反射来进行调用 Module 扩展方法,所以Module中的扩展方法必须是 public 类型。
-
Module 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数。
-
完成Module 后一定要在初始化时注册 WXSDKEngine.registerModule("myModule", MyModule.class); 。
需要回调获得数据的例子
传递参数的例子
在vue通过var module=weex.requirModule(
‘
moduleName
’
)获得对象可以调用其方法
-
Component 调用方式
-
Component 扩展类必须集成 WXComponent.
-
对应的设置属性的方法必须添加注解 @WXComponentProp(name=value)
-
Weex sdk 通过反射调用对应的方法,所以 Component 对应的属性方法必须是 public。
-
扩展的方法可以使用 int, double, float, String, Map, List 类型的参数
-
完成Component 后一定要在初始化时注册 WXSDKEngine.registerComponent("richtext",RichText.class);
示例如下:
注册:
注册完成后可以直接在vue中使用:
<looper data=”list”> </looper>
-
Adapter 调用方式
Weex
对一些基础功能实现了统一的接口,可实现这些接口来定制自己的业务。例如:图片加载,网络请求,存储管理等。图片加载是一个我们必须使用而weex没有实现的adapter,因此开发weex项目首先要实现对图片加载adapter的配置。
注册Adapter
三者使用情景:
module
调用一般是在前端只是要调用native方法获得数据或者跳转界面时使用;component调用一般是在需要使用native组件(UI)时使用;adapter是在需要优化一些基础功能如图片加载,网络连接或者存储时需要使用。
一些需要注意的地方:
优化过场动画,过场和 console 容易引起 app 闪退 需要注意
降低 js <-> native 的通信频率
优化list结构,降低重排重绘压力(缓存和复用)