背景
众所周知,在weex开发中,CSS的书写一直是一个痛点。主要表现如下:
- 支持的CSS属性有限;
- 不支持简写,例如不支持
margin: 10px 0
,必需要分开写上下左右四个方向的margin
; - 在weex中尺寸会根据实际屏幕尺寸基于
750px
自动缩放,而web页面不会,造成视觉效果不一致; - 有一些尺寸(如字体,边框)不需要自动缩放。
解决思路
对于问题1,受限于weex底层的实现,目前并没有办法能够解决。
对于问题2,只需要分开写即可,但是分开写多多少少会有些不便,同时因为前端开发人员通常都已经习惯了简写的方式,很容易忘记分开写。如果有一个工具能够对写好的CSS做自动转换,那么问题就解决了。
对于问题3,可以联想到weex中的布局方案其实与手淘的flexible
布局方案如出一辙,因此只需要一个工具实现同等转换,将CSS中的px
转成rem
即可。
对于问题4,weex支持一个未在文档中提及的单位wx
,使用wx
单位的尺寸不会进行缩放,但是需要一个工具对web页面进行等同处理,否则还是无法达到一致。
解决方案
由上可知,其实只需要对CSS作一些转换,就可以完美解决问题2、3、4。而最简单地实现方式,就是基于postcss
去制作插件。因为postcss
除了将CSS文件抽象成AST
,还提供了对AST
的遍历,我们只需要传入一个回调函数来对接收的内容作简单的处理即可。同时postcss
还提供了一些实用的API
来操作AST
,于是基于postcss
的插件便应运而生了。
因此,你只需要在你的webpack
配置文件中添加的相关配置即可。
对于web
var prefixer = require('autoprefixer');var weexCSS = require('postcss-weex');{ test: /\.vue(\?[^?]+)?$/, loader: `vue-loader`, options: { /** * important! should use postTransformNode to add $processStyle for * inline style normalization. */ compilerModules: [ { postTransformNode: el => { el.staticStyle = `$processStyle(${el.staticStyle})`; el.styleBinding = `$processStyle(${el.styleBinding})`; } } ], postcss: [ weexCSS({env: 'web'}), prefixer({ browsers: ['last 20 versions'] }) ] }}
对于weex
var weexCSS = require('postcss-weex');{ test: /\.vue(\?[^?]+)?$/, loader: `weex-loader`, options: { postcss: [ weexCSS({env: 'weex'}) ] }}
最后,为了正确生成meta
,你还需要在html
模板中引入。