淘宝app是基于Hybrid技术开发的,既包含了native和web技术两部分。
1. Native 部分
Native 部分主要包括以下模块:
1.1 UI框架
淘宝app的 UI 主要使用的是 Weex 框架,该框架基于 Vue.js 开发,可以直接生成 Native 的 View 控件或者 H5。可以减少原生 Android 或 iOS 开发的工作量。
1.2 CMS系统
淘宝app使用了自己的CMS系统来管理页面的数据和运营配置。通过这个系统,淘宝可以动态地修改页面元素,从而实现一些运营功能。
1.3 H5容器
淘宝app还使用了自己研发的 H5 容器,该容器将 H5 页面作为一个内嵌的WebView 打开,这样可以在 H5 页面运行时,调用 Native 的API,支持一些特殊的交互方式,比如页面跳转,登录等操作。
1.4 设备能力
淘宝依赖原生 Native 的能力来完成一些特殊的操作,例如设备的复制、分享、发短信、打电话、截屏等功能。
2. Web 部分
淘宝app的 Web 部分主要使用的是 H5 技术,并且是基于针对移动端优化的 WebView 来开发的,因此在页面性能和用户体验方面都有了明显的提升。
2.1 SPA架构
淘宝app是采用单页应用程序(SPA)架构开发的,这种架构可以提高页面的呈现速度,因为只是局部的数据刷新,不需要整个页面重新加载。
2.2 数据通讯
淘宝app使用的是 RESTfulAPI 来进行数据通讯,这种API具有与设备独立无关,可读性高等优点。同时,通讯数据也采用了JSON格式,因为JSON格式相对比较轻量,能提高网络传输速度。
2.3 自适应页面
淘宝app中,前端开发人员优先采用了自适应屏幕设计,根据页面的不同设ios中嵌套h5做的app备和浏览器,自动适应不同的分辨率和屏幕大小。
2.4 缓存技术
移动设备存储空间的限制,淘宝app依赖于浏览器缓存来提高页面的呈现速度,这种缓存技术可以将页面源文件和资源缓存在本地,极大的提高了页面的呈现速度。
总的来说,淘宝app采用了多种技术手段来构建,在前端开发中,使用Hybrid技术可以更好的将H5和Native因素进行整合,同时这种技术还能极大的降低开发成本,从h5制作app排行而达到更好的用户体验和开发效率。