WEEX 踩坑记录

个人博客链接
近期同事离职，接手之前他的项目，该项目是用WEEX写的。遇到个紧急需求，来不及去熟悉WEEX文档就匆匆开发，开发过程中遇到了很多坑，在这边进行记录，希望对不熟悉WEEX开发的小伙伴们能有所帮助，少走点弯路。

什么是Weex

Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，在集成了 WeexSDK 之后，你可以使用 JavaScript 语言和前端开发经验来开发移动应用。
Weex 渲染引擎与 DSL 语法层是分开的，Weex 并不强依赖任何特定的前端框架。目前 Vue.js 和 Rax 这两个前端框架被广泛应用于 Weex 页面开发，同时 Weex 也对这两个前端框架提供了最完善的支持。Weex 的另一个主要目标是跟进流行的 Web 开发技术并将其和原生开发的技术结合，实现开发效率和运行性能的高度统一。在开发阶段，一个 Weex 页面就像开发普通网页一样；在运行时，Weex 页面又充分利用了>各种操作系统的原生组件和能力。

Weex是跨平台开发的一种解决方案，像开发Web一样开发APP,同时兼任安卓和IOS,性能上因为使用了系统的原生组件和接口，要强于H5,但毕竟不是原生，性能上应该还是低于原生。目前很多大厂APP都使用到了Weex。

坑集合

下面步入正题，坑来啦！下面解决方案都是以Vue为例，请注意。

1.Weex中样式不支持样式简写，类似margin:0 10px 20px 30px这样都是不支持的。

如题Weex支持margin:30px,但分开简写是不支持的，所以如果每个边距离不一样时只能通过margin-top/right/bottom/left来一个个设置。padding相同。

2.weex中只支持px单位

这个很坑，%都不能用，用了会有问题，这个在开发时少了很多灵活性。

3.在做屏幕适配时，安卓和iOS存在差异

weex中屏幕高度不能直接使用weex.config.env.deviceHeight而要取：750 / weex.config.env.deviceWidth * weex.config.env.deviceHeight。

4.点击穿透问题

做类似弹窗时点击空白或者弹窗会穿透触发到下面页面的事件，解决方案：在弹窗这些悬浮的父级元素加上@click.stop。

5.weex中只支持v-if，不支持v-show

v-if每次都是重新渲染的，这样会有一些性能的损失。

6.image组件路径只支持绝对路径

如题

7.weex中写样式不支持嵌套写法类似.parent .child这样，不能够集成父元素样式。

如题

8.v-bind:class只支持数组形式的语法，另外的两种形式对象和字符串都不支持

如题

9.不支持CSS画三角形

如题

以后开发会持续更新。。。。

总结

Weex的实现诚然带来了一些便利，使web前端开发人员可以像开发web页面一样，实现不属于app性能的页面，但也可能正是为了兼容原生的底层组件和接口，舍弃了很多web开发的灵活性，在开发中会有各种各样的“坑”，可能也正是这样导致Weex现在一直不温不火的原因，社区也不太活跃，许多要自己摸索，希望Weex能背靠阿里，以后能不断完善。