文档章节

不要在微信上用material-ui

yizhichao
 yizhichao
发布于 2017/07/12 10:59
字数 1005
阅读 92
收藏 0

微信浏览器已经全面升级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哇。

本文转载自:http://eyehere.net/2016/dont-use-material-ui-in-wechat/

yizhichao

yizhichao

粉丝 15
博文 463
码字总数 362827
作品 0
南京
程序员
私信 提问
基于Flask+Vue+Celery+SQLAlchemy+Redis等实现的微信管理系统

现在绝大多数同学都在使用微信,不过微信有很多限制,比如: 微信聊天记录只保存在本地,换个手机那些内容就找不到了 微信扫码加群人数有限制,超过100个就得先加群聊成员微信再由其拉进去,...

董伟明
2017/07/25
0
0
优质的 Vue 开源项目

Vuetify - Vue.js 2.0 组建库 Material Design 的前端组建库,基于 Vue.js 2.0 让 Vue 和 React 无缝融合 前端社区 前端社区 Muse UI — 基于 Vue2.0 的 Material Design UI 库 Muse UI — ...

掘金官方
2017/12/15
0
0
[教程]Chrome 68稳定版如何激活新版Material Design UI

日前上线的Chrome 68版本中,最大的改变莫过于所有HTTP网站均明确标记为“不安全”,不过令人欣喜的是在该稳定版中已经内置最新的Material Design UI设计,但目前并未在设置页面提供激活选项...

稿源:
2018/07/27
0
0
用好Android图片资源,打造更精致的APP!

前言 由于android系统的开放性,以及IOS的相对封闭。第三方设备想要使用苹果的OS,目前来说是不可能。所以,各厂商纷纷的投入了android的怀抱, android阵营也越来越强大,如今移动操作系统也...

力谱宿云
2016/11/03
554
1
Linux/Windows/Mac&Chrome OS版Chrome获Material Design更新

据外媒报道,近日,谷歌Chromium宣传人员François Beaufort宣布,Linux、Mac、Windows以及Chrome OS下的Google Chrome网页浏览器用户界面将获得一个全新的Material设计模式。在过去的几个月...

稿源:
2018/07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MySql双主架构原理

在企业中,一般系统架构的瓶颈会出现在数据库这一部分,mysql主从架构在很大程度上解决了这部分瓶颈,但是在mysql主从同步的架构也存在很多问题;比如:1.关于数据写入部分(也就是主库)往往很难做...

xiaomin0322
14分钟前
0
0
分布式系统中一致性哈希

问题场景 近年来B2C、O2O等商业概念的提出和移动端的发展,使得分布式系统流行了起来。分布式系统相对于单系统,解决了流量大、系统高可用和高容错等问题。功能强大也意味着实现起来需要更多...

Java领航员
16分钟前
0
0
接口限流算法:漏桶算法和令牌桶算法

漏桶算法 漏桶可以看作是一个带有常量服务时间的单服务器队列,如果漏桶(包缓存)溢出,那么数据包会被丢弃。这一点和线程池原理是很相似的。 把请求比作是水,水来了都先放进桶里,并以限定...

铁骨铮铮
23分钟前
1
0
Android 生成二维码工具类

/** * 生成条形码和二维码的工具 */public class ZXingUtils { /** * 生成二维码 要转换的地址或字符串,可以是中文 * * @param url * @param width ...

lanyu96
28分钟前
1
0
谈谈lucene的DocValues特性之SortedNumericDocValuesField

前面已经介绍过NumericDocValuesField,这里想强调一下SortedNumericDocValuesField是针对同一篇文档中一键多值的情况进行排序的,换句话说不同文档的同一字段值可以乱序。核心的写入流程与谈...

FAT_mt
36分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部