weex 优点和缺点

weex的优缺点

作者: 王福林 丁某

[TOC]

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

优点

Weex 更加轻量

  • 在Native端,两者的最大的区别可能就是在对JSBundle是否分包。React Native官方只允许将React Native基础JS库和业务JS一起打成一个JS bundle,没有提供分包的功能,所以如果想节约流量就必须制作分包打包工具。而Weex默认打的JS bundle只包含业务JS代码,体积小很多,基础JS库包含在Weex SDK中,这一点WeexFacebookReact 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可以支持iOSAndroid, 需要自己扩展去支持web. 而Weex可以支持iOSAndroidweb
  • React Native宣称Learn once, write anywhere,而Weex宣称Write Once, Run Everywhere. Weex不需要像RN那样不同平台写不同的代码(虽然很多可以重用), 写一份代码 iOS、Android、 H5都能够适用

缺点

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

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

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

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

已知的坑

  • 目前不支持iOSpresentViewController方法. 比如说在某些界面连续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样式,最令人想不到的就是不支持
    ,还不支持

    ,不支持CSS percentage 单位,不支持类似 emrempt 这样的 CSS 标准中的其他长度单位。不支持 hsl(), hsla(), currentColor, 8个字符的十六进制颜色。

  • WeexW3C上的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

    你可能感兴趣的:(weex 优点和缺点)