不要在微信上用material-ui

By | 2016/04/12

微信浏览器已经全面升级Webkit内核了(好样的),所以这篇文章有点不合时宜了,仅留做参考。

—————————–

这里说的 material-ui 是指这个UI框架,并不是说 Google 的 Material Design 设计风格。

自打脱离 Angular 的怀抱拥抱 React 后,我把移动端的前端也都用上了 ReactJS,在前端框架的选择过程中,我瞄上了 material-ui 这个实现了google material 设计的框架,虽然部件并不是很丰富,但是已经可以给我省下很多力气了,Github 上的赞也很多,之前做过一个简单的微信应用,因为很简单,所以用起来没有什么太多的问题。这次开始做一个“比较复杂”的应用,没多想还是上了 material-ui,不想……

微信出了个调试工具,看起来像是用 atom 的同系 electron 君做出来的的,可以比较简单的调试公众号网页。因为是 electron,所以内核应该是webkit无误,在开发整个公众号的时候,我一直在上面调试,最后差不多完成迁移到服务器,用手机打开一看,我·乐·个·趣,这是我做的吗??

小小地总结如下:

微信Android版里用的是X5的核心,传说中2010年的技术,也能算的上是“现代浏览器”了,但是它不认识flex,material-ui中大量使用了flex布局,从AppBar到GridList,可以说flex布局是CSS3布局最让人振奋的一点,但是微信一脸茫然,都给解释成block了。

OK,我知道微信里可以用古老的-webkit-box布局,和flex是同根同源,先不说那反人类的写法,react中style用的是字典,意味着style={{display:”flex”,display:”-webkit-box”}}最终只能保留后者,那么不是android版微信的咋办?用 vendor-prefix 库吧,微信游览器根本就不在人家的支持范围内!

于是只能用 className 写原生的css,有些东西是可以这么来一下的,但是 material-ui 中的 component 包裹的太深啦,我都没法指明哪个div哪个 input…… 在写了无数的hack后,终于先点样子了。不过还有个坑是,如果你用postCSS,其中的cssnano会把box类型的声明给自动去掉,记住将autoprefixer的remove选项关掉,我们自己来注意不写费代码吧。

 

不过 toggle 组件一直无法使用,最后查看源码,发现它是依靠 input type=checkbox 来触发的,OK 其实很常规的写法,iPhone上的微信是可以正常动作的,然而在Android微信中,checkbox的input根本就不能修改大小,意味着整个组件只有那么一米米大的触发空间,正常情况下那么一个硕大的Toggle,用户只有点左上角一丁点大的地方的时候才能切换状态;而当你修改一下toggle的大小的时候,你根本不知道那个透明的input在什么位置…… 你给我滚出来我保证不打死你。

最后不得已,放弃组件本身的onToggle,使用外层的元素的onClick来修改toggle的状态,看起来倒也不错。

 

还有一个我到现在也没明白为啥,dropdown menu 和 select field 在微信里是空白,点开倒是能显示咯菜单背景,但是菜单项看不到,也不可点选,我实在是没力气去debug了,换回原生的select……

 

最后,material-ui本身还是不错的,在手机版chrome上运行良好,就是我大魅族自带浏览器都运行的很正常。只是没想到亿万用户的微信浏览器这么孱弱,之前一直用bootstrap给微信做前端,看来还是有道理的,太激进的技术是要代价滴。希望微信也多多加油,跟上日新月异的前端发展,不要成为移动时代的IE6哇。

发表评论

电子邮件地址不会被公开。 必填项已用*标注