weex的优缺点

作者： 王福林 丁某

[TOC]

目前常见的移动端跨平台开发， 采用js bridge的开发技术，主要分为Weex和RN, 以下优缺点主要是通过两者对比总结.

优点

Weex 更加轻量

• 在Native端，两者的最大的区别可能就是在对JSBundle是否分包。React Native官方只允许将React Native基础JS库和业务JS一起打成一个JS bundle，没有提供分包的功能，所以如果想节约流量就必须制作分包打包工具。而Weex默认打的JS bundle只包含业务JS代码，体积小很多，基础JS库包含在Weex SDK中，这一点Weex与Facebook的React Native和微软的Cordova相比，Weex更加轻量，体积小巧。
• 由于 Weex 采用了 Vue 作为上层框架，相较于 React 更加轻量，Vue 的官网宣传就是非常轻量，体积小巧，语法简单。

学习成本更小

Vue 的学习成本相较于 React 更加小，大部分 Native 开发者更容易上手。

• 环境配置：
  • ReactNative需要按照文档安装配置很多依赖的工具，相对比较麻烦.
  • weex安装cli之后就可以使用
• vue vs react
  • react模板JSX学习使用有一定的成本
  • vue更接近常用的web开发方式，模板就是普通的html，数据绑定使用mustache风格，样式直接使用css
• sdk使用:
  • ReactNative需要解决mvn依赖的问题，因此必须自己修改源码，打包发布
  • weex可以直接在mvn项目中使用
• 页面开发:

  • weex提供了一个playground，可以方便的预览正在开发的页面，并在浏览器中就可以实时看到效果。

  • ReactNative开发一个页面，需要建立一个native工程，然后编译运行，在真机或者模拟器中可以看到实时效果， 但不能在浏览器中预览

跨平台 支持web端

• Weex从出生那天起，就被给予了一统三端的厚望。React Native可以支持iOS、Android, 需要自己扩展去支持web. 而Weex可以支持iOS、Android、web
• React Native宣称Learn once, write anywhere，而Weex宣称Write Once, Run Everywhere. Weex不需要像RN那样不同平台写不同的代码(虽然很多可以重用), 写一份代码 iOS、Android、 H5都能够适用

缺点

资料少，社区活跃度不够， 成熟的组件少，坑相对较多

• 学习资料少，从问世的时间上来看，Weex 的学习资料比较少。而RN使用的开发者比较多, 社区活跃，围绕react产生了许多开发框架。
  这一点，个人认为是weex最大的缺点，甚至是weex能不能很好发展下去的关键因素，虽然react-native和weex大部分普通界面的开发都可以用js的方式来开发， 但很多移动端的功能，必须是原生开发，然后对接到js端。 比如，地图控件， 设备信息， 二维码扫描，摄像头的调用，视频播放，本地图片选择，动画绘制，日历组件，通讯录信息获取，国内的一些服务，qq登录，支付宝，极光推送，等等等等。 这些常用组件, 以及一些框架，react-native因为社区活跃，已经有不少优秀的轮子在github上。 weex起步较晚，且国外开发者可能并不怎么看好，这方面的资源相对较少。 虽然weex搞了个 插件市场，但上面的资源太少，且看不出能火爆起来的趋势。

• 社区活跃度不够，Weex 相较于 RN 起步比较晚，Weex目前社区主要由阿里人员在维护, 相较于已经成熟的RN社区目前还有很多不足。用的人相对RN少很多，目前没有形成一个良好的生态。作为开发者，如果碰到一个问题，搜索不到，抛出去也没人很好的解答，自己摸索的成本就会很高了。 可能解决一个问题的成本就已经远远大于节省下来的一点学习成本。

• Weex 现在存在的 BUG 相较于 RN 还比较多，对于使用来说会有一些影响。

已知的坑

• 目前不支持iOS的presentViewController方法. 比如说在某些界面连续Push的时候，页面边缘会有一些线条从屏幕上扫过。还有捕捉JS错误或者异常的时候，Weex并不能可靠的捕捉到异常，这点需要靠Native来做，Native捕捉到异常以后再传递事件给JS Runtime去处理。

• 计算页面宽高尺寸这点是最需要注意的。Weex进行界面适配的时候是用750为标准的，所以需要根据750去换算。还有一点是Weex里面有四舍五入的操作，是会丢失一点精度的。具体这块请看《Weex 事件传递的那些事儿》这篇文章里面的源码分析。

• Weex JS 引擎也不支持 HTML DOM APIs 和 HTML5 JS APIs，这包括 document, setTimeout 等。

• Weex关于Web标准的实现现在还没有达到100%，所以用Vue来写Weex的话，有些是不支持的。比如说一些CSS样式，最令人想不到的就是不支持<br>，还不支持<form>，<table>，<tr>，<td>，不支持CSS percentage 单位，不支持类似 em，rem，pt 这样的 CSS 标准中的其他长度单位。不支持 hsl(), hsla(), currentColor, 8个字符的十六进制颜色。

• Weex对W3C上的FlexBox的规范也没有支持完全，暂不支持inline，也不支持Z轴上面的变化，不过移动端在Z轴上的需求真的没有。Weex的Layout是用的Yoga之前的某个版本，解决问题的方式也比较直接，后期升级到最新版的Yoga，便可以支持更多的Flex的标准了。具体还有不支持的可以查看《Weex 目前不支持的Web 标准有哪些》. 最好先看看，心里有个数，以免开发时候遇到一些莫名的bug，殊不知最终是因为不支持导致的。

• 很多组件和模块需要自己扩展（比如datepicker，iconfont，摄像头，二维码等）

• 具体问题可以查看github上的issues. Weex 相关文章收集weexteam/article

参考学习资料:

• Weex开发之路（一）：开发环境搭建
• Weex开发之路（二）：完成一个ToDoList项目
• Weex学习与实践(一):Weex,你需要知道的事
• Weex学习与实践(二):iOS集成的tips
• Weex学习与实践(三):iOS原理篇
• 客户端动态化系列之——Weex
• weex 学习/实践指南
• Weex详解：灵活的移动端高性能动态化方案
• iOS 开发者的 Weex 伪最佳实践指北
• Weex 是如何在 iOS 客户端上跑起来的

其他相关: ( 主要是一些weexteam开源的工具)

• Rax
  • alibaba/rax
  • 什么是 Rax，以及 Rax 的特点
• LuaViewSDK
• weex-hackernews
• weex-toolkit