ReactNative 到 Weex 的艰难一迈

“Write once，Run Everywhere” 一次编写，多端运行。React迁移到MIT协议，惋惜React Native依然没改，没有RN的日子，还好有Weex这位哥们顶着。虽然没有RN那么牛逼，但也算是一个不错的小兄弟。

不少人可能要问我搞了这么久的RN如今转Weex干什么？提及来，真是一个悲伤的故事

为何不用RN

Facebook并无像React那样把ReactNative也迁移到MIT协议，因此使用ReactNative开发对外产品，依然有专利风险。通常的公司其实没什么影响，但我厂状况比较特殊，有好几个核心的专利技术，老板不想冒这个险。加之隔壁的阿里Weex推得很火，那就用用看吧！

React专利许可证具体细节欢迎出门左转看我以前的文章：《React专利许可证研究》

Weex较RN的优点

说老实话，和ReactNative打交道这么久，忽然换一个小兄弟上，一时还真的难以适应，甚至一脸嫌弃。Weex和ReactNative的设计理念也彻底不一样。RN重点在Native，以React的方式开发跨平台App，它注重Native细腻的用户体验和强大的原生功能，运用 ReactNative 甚至不须要Native工程师就能独立开发一款功能完善的App。

Web开发体验

独立开发App对Weex来讲比较困难，由于它的Native能力没有RN那般强大而全面。它更注重 Web开发体验，顾名思义就是像开发Web网页同样开发跨平台App页面，注意了是以Web为主导，因此它的设计理念提倡 轻量 + 可拓展（至于“高性能”较RN并没什么太大的体现），官方也推荐用Weex和Native混合的方式开发App，也就是把Weex做为一个组件融入到Native App，替换传统的 Hybrid 模式。

没有专利限制

Weex已经加入ASF，没有ReactNative 的专利协议限制，能够放心大胆地使用。固然有童鞋会反问 Weex目前还在使用 FaceBook 的 Yoga引擎，会不会有隐患？这个短时间内不须要咱们操心，首先这个问题自己边缘就很模糊，其次 像阿里这样的大厂早晚会开发一套相似的引擎来替代，时间问题。

三端共用代码

Weex既保留了H5的灵活性，也赋予了其Native能力，经过JavaSriptCore+JSbridge直接和Native进行通讯，较之 Hybrid的WebView + URLScheme方式性能好了不少。甚至能够实现传说中的 “三端融合”——也就是 Web、iOS、Android端的前端部分共用一套代码，省去了独立建站和维护的麻烦。

固然有得必有失，三端兼容的坑也很多，Android各机型 hack 就不提了，Web端其实就是个WebApp，要利用浏览器的BOM与三方的JS-SDK 来完成 DOM和HTTP之外的功能。不过使用Weex内建的标签和样式能够很容易实现三端布局样式和基本行为的一致，仍是大大地减小了工做量。

值得一提 Weex的布局单位有且只有px，默认的显示宽度 (viewport) 是 750px，组件都会以 750px 做为满屏宽度，但能够经过 meta.setViewport() 手动指定页面的显示宽度

Type	iPhone4	iPhoneSE	iPhone8	iPhone8P	iPhoneX
物理像素	640x960	640x1136	750x1334	1080x1920	1125x2436
显示像素	750x1125	750x1331	750x1334	750x1333	750x1624
像素比	@0.85x	@0.85x	@1x	@1.44x	@1.5x

对CSS3的支持

Weex虽然也对CSS作了必定的阉割，但比较 ReactNative，它保留得更多，甚至支持大量的CSS3特性，这一点值得赞叹。CSS3做为Web开发的利器，放着不用不免惋惜。下面列举Weex 和标准Web的样式差别：

• 支持的CSS3特性包括：FlexBox、2D转换、过渡、线性渐变、阴影（仅Web和iOS）、伪类、自定义字体（iconFront图标也能用哦）
• 中支持单个 类名选择器，不支持 关系型选择器，也不支持 属性选择器
• 支持组件级别的做用域，为了保持Web和Native的一致，须要 <style scoped> 声明做用域
• 不支持CSS3动画（动画请使用Weex内建animation模块）和3D转换
• 不支持 display: none ，用模板语法 v-if 替代，不建议用 opacity: 0（Native里有点透问题）
• 相似RN，为了提升解析效率，Weex样式属性不支持简写，好比 font、border、transfrom不能简写

Weex不足之处

本节的最后，仍是想吐槽几个Weex的不足之处，但愿官方能尽快升级和改进：

社区建设缓慢

这应该是最要命的，Weex社区从去年开源到今天仍是这般冷清难免使人神伤，虽然我知道阿里内部推广力度很大，可是既然选择开源，就应该跳出阿里的圈子，一些成功案例、成熟解决方案、优秀架构设计等就不该该藏着掖着，否则真的很难推广起来。我不但愿遇到坑点 Google 几圈都找不到有价值的方案，GitHub上提问半天都等不到一个满意的答案（哈哈，说得有点激动啊，很感谢 mario 上次回答个人提问，但愿能尽快反应到官方文档里）

Native能力提升

若是不提升Native能力，Weex的 全页模式 价值其实不大。不要求面面俱到，但但愿能再添加一些经常使用的，好比：statusBar控制、位置信息、Android动态权限分配等

真机调试工具升级

Weex提倡Web开发体验，因此开发和调试都以Web为主，作静态页面还好，但我要调试Native端的特有逻辑，就须要在Native端集成weex-devtool。这个方案的确另辟蹊径，不过每次改完代码须要手动刷新会不会太麻烦，能不能搞个相似RN的 热替换 或 LiveReload功能呢？

Mac端文件权限问题

在Mac端Shell工具进入Weex的目录，不管npm相关命令，仍是git操做都须要sudo权限，好麻烦。我很懒的，Weex在建立文件的时候能不能帮我把写权限的事也作了？

---

哈哈，是否是我太蠢没能领悟到技巧，不对的地方欢迎留言指正哈。不过前端工程师都是挑剔的，但愿Weex能不断改进和完善！