前两天分析了菜鸟裹裹的具体业务,菜鸟裹裹能够成功快递行业的王牌产品,业务当然是非常重要的一环,不过App的操作体验,以及能够让用户使用上更加方便快捷,也是成功的重要因素,所以这次就来分析菜鸟裹裹的UI框架设计。
这次对主要功能页面进行分析,分析工具:- UIAutomatorViewer-用来扫描和分析Android应用程序的UI组件的GUI工具
- jadx-反编译工具
首页
menu_and_navigation_bar_container和内容区域 navigation_bar_content 布局文件 复制代码
内容区域布局:
复制代码
布局文件的具体结构图:
menu_and_navigation_bar_container主要包含了NavigationBarView,底部导航内容:首页,取件,寄件,驿站,我。navigation_bar_content：内容区域。通过底部导航的切换,内容显示不同的页面。main_activity_content：首页的内容区域显示。分为三部分：header_title_view：通过自定义ViewHomepageTitleView实现homepage_fragment_scrollable_layout：通过HomepageNewFeatureLayout实现store_house_ptr_frame：展现列表和下拉刷新,分别通过ListView和PtrBirdFrameLayout实现
物流详情
- 最底层是全屏mapview
- 菜单操作层覆盖在mapview上
- 最上面一层是物流从发货到收货的节点列表
不过从反编译中无法找到对应的布局xml,通过关键字logistic在AndroidManifest.xml文件搜索到相关的Activity。发现com.cainiao.wireless.logisticsdetail.presentation.view.activity.ShowGoodInfoActivity有相关性,ShowGoodInfoActivity中使用ShowGoodInfoFragment渲染, ShowGoodInfoFragment中有个方法会真正进入到详情的逻辑。
public void showGoodInfo(ListpackageItems) { if (packageItems != null) { if (packageItems.size() == 0) { Bundle bundle = new Bundle(); bundle.putString("orderCode", this.mOrderCode); bundle.putString("mailNo", this.mMailNo); bundle.putString("cpCode", this.mCpCode); //进入详情的Router声明 Router.from(getActivity()).withExtras(bundle) .toUri("guoguo://go/logistic"); getActivity().overridePendingTransition(0, 0); finish(); } if (packageItems.size() == 1) { Router.from(getActivity()).toUri(((LogisticsDetailGoodsDO) packageItems.get(0)).taobaoGoodUrl); getActivity().overridePendingTransition(0, 0); finish(); return; } this.mSlideShowView.setDatas(packageItems); }}复制代码
该方法通过Router进行跳转到guoguo://go/logistic,在AndroidManifest.xml有对应的声明:
复制代码
没错就是它, LogisticDetailActivity就是我们要找的显示物流详情的页面。 反编译的代码中没有对应的LogisticDetailActivity的源码,这些部分应该是通过Atlas动态部署的。 LogisticDetailActivity在Atlas框架中的声明
package android.taobao.atlas.framework;public class FrameworkProperties { public static String autoStartBundles = "com.android.update,com.cainiao.wireless.pr"; public static String bundleInfo = " ... {\"activities\":[\"com.taobao.cainiao.newlogistic.LogisticDetailActivity\"],\"contentProviders\":[],\"dependency\":[],\"isInternal\":true,\"pkgName\":\"com.taobao.cainiao\",\"receivers\":[],\"services\":[],\"unique_tag\":\"67520454e3fdb8fd2307b1c08c602abf\",\"version\":\"4.7.1@1.1.1.12\"} ...."; public static String group = "cainiao4android"; public static String outApp = "false"; private String version = "4.7.1"; public String getVersion() { return this.version; }}复制代码 寄件记录
cn_wx_page_container,看id的名字判断出这是weex页面。 UI布局： 复制代码
这个页面,通过抓包分析,该页面的请求url： https://cn.alicdn.com/cainiao-weex/order_center/0.3.0/main/order-center-homepage.js?navtype=weex&fc=true&bs=black&orderType=send&referrer=guoguo%3A%2F%2Fgo%2Fsendpackage 里面主要是Vue编写的页面代码和逻辑。
总结
分析了App三个主要的功能,大致对菜鸟裹裹的UI框架有所了解。 在一文中,罗列了App使用的一些框架。 通过分析,物流详情中使用了Atlas,寄件记录使用了Weex,其他的页面,有兴趣的同学可以自行分析。 虽然物流App,不像电商App(淘宝,天猫,京东等)那样要求很高的动态化,不过菜鸟裹裹App使用了很多动态化框架,在不影响操作体验的前提下,又增加了运营可以操作性,还是非常值得学习的。 以后有关菜鸟裹裹的分享,会集中在从零开始高仿菜鸟裹裹App(计划中),希望同学们多多支持。