一起来玩Weex，硬核，Flutter全方位深入探索

Java老杨

于 2024-03-17 20:56:12 发布

阅读量797

点赞数 21

分类专栏： Android程序员文章标签： flutter

本文链接：https://blog.csdn.net/m0_60721823/article/details/136789796

版权

Android程序员专栏收录该内容

10 篇文章 0 订阅

订阅专栏

关于下面的loading控件主要功能就是提供上拉加载，很简单，与之相配的是refresh组件，聪明的你肯定已经猜到就是我们的下拉刷新。

list组件里面的loadmore是监听我们的上拉加载事件，相当于我们的Listener和下面cell的click都是监听事件。除此之外还有scroll事件，我们这里并没有用到。写法都是一样，前面写个@。

list与我们的RecyclerView一样只不过是容器，更好管理我们的条目，与我们item(ViewHolder)相对应的就是cell组件，这里你要知道一个思想，数据驱动UI，我们的数据源去控制我们UI的渲染。而weex是基于MVVM的，这里的v-for主要对集合的操作，item就是所处索引为index的值。相当于我们在onBindViewHolder根据position拿到数据，这很好理解。而cell组件里面的就是我们的onCreateViewHolder创建的view。

其中text和image我就不过多介绍了，相应链接都给出了。如果没接触过前端的同学肯定很好奇它是如何布局摆放的，像什么宽高啊，padding和margin啊，这其实是我们的css去控制的，但是是阉割版的，如果已经看过v-for链接的同学，发现是vue的官网，是的，weex基于vue，原来编写这样的文件格式为we，而现在要改为vue格式才能编译成正确运行的js文件。

上面说了weex是MVVM模式，其实是vue采用MVVM模式，如果对Android的MVVM模式开发很熟悉的话，越看上面的文件越像我们的xml，我一直想说这个，xml在我们Android Studio中可以预览，如果上面的文件可以预览那该多好？No problem!我们可以利用Playground进行在线编写以及运行调试，甚至可以利用Playground的客户端扫码进行在手机端上调试，简直吊炸天。

Component

Component，也就是我上面说的组件，也就是我们的控件，除了官方内置的几种组件外，我们还可以自定义控件哦，是不是有点小兴奋，想当年也是因为自定义控件入行了Android，最前面所说的TabLayout+ViewPager+Fragment我把集成为一个控件，这样的做法，很明显的一个缺点就是耦合性增强了。我们现在处于学习嘛，怎么简单怎么来，先上我们的代码。

public class WXTabPagerComponent extends WXVContainer

@Override
protected LinearLayout initComponentHostView(@NonNull Context context) {
LinearLayout root = (LinearLayout) View.inflate(context, R.layout.layout_tab_pager, null);
…
return root;
}

@WXComponentProp(name = “titledata”)
public void setData(List datas) {
if (mTabPagerAdapter == null) {
…
mViewPager.setAdapter(mTabPagerAdapter);
return;
}
mTabPagerAdapter.reload(datas);
}

WXSDKEngine.registerComponent(“tabPager”, WXTabPagerComponent.class);

大部分无关紧要的代码都省略了，我相信你都可以脑补出来。最上面是我们是我们的自定义组件WXTabPagerComponent继承WXVContainer，还可以继承WXComponent，两者相当于我们的ViewGroup和View。

一般我们会重写initComponentHostView方法，也就是返回我们的自定义控件，我理解为它的泛型就是我们的自定义控件，return之后就是我们的component。

下面的setData方法这里可以理解为数据绑定方法，更准确的理解是属性方法，什么叫属性方法？我们看到最下面的vue代码，titledata就是我们setData的注解name，而datas就是一个字符串集合，上面我已经说过weex是基于MVVM的，如何进行绑定的下面再说。而如何解析成List用的就是very牛皮的fastjson。所以setData这种属性方法你可以简单的理解为TextView的setText方法。

再下面是自定义控件的view层级。再下面是你必须注册该组件，不然weex不认识这玩意。

style="flex:1;"用来指定它的宽高，你可以理解为LinearLayout的weight属性，若不指定宽高，默认是0。

数据绑定

接上面的自定义组件，贴数据绑定代码：

这里的花样也是百花齐放，我学的时候也是一头雾水，比如带return属性写法表示只能在该组件生效，反之全局生效，可能会造成变量污染。这里的datas你可以理解我们的成员变量，就我们WXTabPagerComponent组件来说，我们return的datas直接以:titledata="datas"这样的形式进行绑定，一旦datas变量变化相应绑定的组件随之变化，所以叫属性方法。这里再多嘴一下，:titledata其实是缩写，全写是v-bind:titledata，这样是不是更好理解了？与最上面事件的@写法如出一辙，@写法的全写是v-on:，这些都是vue的东西。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Native和JS通信

自定义事件通知

该用法我还没用过，不做解释，我把官方的贴出。

public void fireEvent(String elementRef,final String type, final Map<String, Object> data,final Map<String, Object> domChanges){ }

public void fireEvent(String elementRef,final String type, final Map<String, Object> data){
fireEvent(elementRef,type,data,null);
}

public void fireEvent(String elementRef, String type){
fireEvent(ref,type,new HashMap<String, Object>());
}

具体解释可以戳这里。这种方法用于native主动调js。

事件回调

这种方法用于js调native。

一种是带回调的，诸如：

public class WXLocation extends WXModule {
@JSMethod
public void getLocation(JSCallback callback){
//获取定位代码…
Map<String,String> data=new HashMap<>();
data.put(“x”,“x”);
data.put(“y”,“y”);
//通知一次
callback.invoke(data);
//持续通知
callback.invokeAndKeepAlive(data);

//invoke方法和invokeAndKeepAlive两个方法二选一
}
}

一种是不带回调的，诸如：

public class RouterModule extends WXModule {
@JSMethod(uiThread = true)
public void router(String url) {
BrowserActivity.start(mWXSDKInstance.getContext(), url);
}
}

上面就是一个简单的路由，调用方法要用注解JSMethod，后面是确定是否在主线程调用。

双方使用也很简单：

WXSDKEngine.registerModule(“RouterModule”, RouterModule.class);//跟自定义组件一样，必须在原生注册

weex.requireModule(‘RouterModule’).router(item.url);

Android扩展

确切来说应该是Adapter扩展，Adapter顾名思义就是适配器，就是说js某些地方可能需要原生来实现达到性能最优。

常见有：

IWXUserTrackAdapter：相关性能数据 (首屏加载时间、JS-Native 通信时间、dom 更新时间等) 和其他通用信息 (JSLib 文件大小, Weex SDK 版本号等)，好像可以用于埋点统计
IWXDebugAdapter：从字面上就能确定这玩意拿来调试的
IWXStorageAdapter：不多说，用来存储的
IWXImgLoaderAdapter：用来图片加载的，默认并没有实现，下面会给出自己实现的代码
IWXHttpAdapter：用来支持网络下载的，默认使用HttpURLConnection，下面也会给出实现代码

public class WXImageAdapter implements IWXImgLoaderAdapter {
@Override
public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {

if (TextUtils.isEmpty(url)) {
return;
}
final Context context = view.getContext();

if (url.startsWith(“mipmap://”)) {//加载本地资源
…
view.setImageResource(imgId);
return;
}

Glide.with(context)
.load(url)
.crossFade()
.into(view);
}

private String getResIdStr(String url) {
…
return url.substring(start, end);
}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级安卓工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Android移动开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。