ReactNative 到 Weex 的艰难一迈

Posted 2022-12-11 Jafeney

“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能不断改进和完善！