Weex Ui

简介

Weex Ui是一组件库。官网

对比

• H5（快）
  简单高效、发布即更新、一URL适配多端
• Native（性能体验好）
  富交互、性能体验、调原生能力、管理内存
• Weex（快+性能体验好）
  最初Hybrid通Bridge提供部分Native能⼒提H5体验，如H5中直获App定位信息，用相机、播放视频、导航跳转等能力，业界有Cordova、Ionic、Meteor成熟方案。还有用离线包体系通提前下载资源⽂件，访问时路由拦截加载本地资源，让H5页面达秒出、动态更新、弱网可用效果。16年左右跨平台开发技术逐火，全新开发思路即用JS写Native，⽤Web开发体验构建⾼性能、可扩展Native应⽤以获上述快和体验。

适用

场景

• 营销业务、首页、频道、搜索列表、正向流程、简单详情、富交互页面都适用Weex。展示类项目优用Weex、重构/新项目优用Weex、深度垂直类目尝用Weex。
• 双11超长列表滚动，30多屏数据，快滚很顺滑。
• 图3富交互场景，粘手效果丝滑拖动，快速滑动，动态隐藏头部等功能都可做。
• 逻辑异常复杂、多组件国际机票列表页，Weex同可胜任。

体系

电商、工具类、企业应用、文娱、自媒体、新闻。

建Weex Ui组件库体系原因

• 引Weex初期通Weex Ui让未接触Weex同学对其编写有借鉴作用
• 提炼业务中公共组件，便于直引，提开发效率
• 业务规范、视觉规范、最佳实践的及时同步
• 将Weex业务疑难杂症通组件封装，对外只暴简单逻辑

自测Weex

之前通macacajs测试框架和Weex结合，通自定义一连串手势、事件，最后通json表明执行顺序：

• 安装app
• 自动打开native页面
• 登录，自动输入
• 自测飞猪度假首页，包点击、跳转、滑动、下拉刷新等
• 自测飞猪专线，包左/右滑
• 自测Weex Ui，包打开组件、点交互逻辑
• 自动各页面运行截图并将测况邮测试方

Weex原生组件封装注意事项

• 通用性。仅多业务同时用且具可抽离性特性组件，如Video/TabBar/TitleBar/ImageUpload这些在Native成熟组件。
• 稳定性。Native组件不像weex上层组件可调节性大，故注意Native组件一定无Bug，防修复和更新麻烦，同时Native组件一开始应将大部情况做成可配置化，防频繁更新致多版适配。
• 原子性。不建议一组件同做多事，应单一，然后通搭配方式得更多功能。

weex组件开发和实践过程经验

• 811原则。默认80%功能应不需用户配多参，10%地方用户可通配一些参达目的，10%稀有情况暂不考虑。
• 统一收口原则。避后续组件变大杂烩，后续迭代视觉交互、增新功能需考虑通用性，这需一人统一收口、开发维护此组件，可避很多“业务特性”干扰组件可用性。
• 性能体验优化。Weex组件比页面编写更应保性能体验。
• 信任机制。多时别人用你组件很大原因是组件无问题、稳定且后续常维。

跨端开发形势

• Native布局方式需向H5开发灵活性学习，逐步用自动布局实现并引弹性思路开发，避绝对计算。
• 数据绑定越来越便捷，如MVVM思路，数据变后视图立马修改而非手动触发。