关于postcss-weex插件, 让weex开发更爽一点

qingshanli1988 发布于2019-08-20 18:55 / 819人阅读

摘要：背景众所周知，在开发中，的书写一直是一个痛点。解决思路对于问题，受限于底层的实现，目前并没有办法能够解决。而最简单地实现方式，就是基于去制作插件。

背景

众所周知，在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的插件postcss-weex便应运而生了。

因此，你只需要在你的webpack配置文件中添加postcss-weex的相关配置即可。

对于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模板中引入flexible。

GPU云服务器云服务器关于前端开发关于android开发关于安卓开发环境问题 eclipse插件开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84876.html

你不知道的前端SDK开发技巧

摘要：一个带提示的最后对于开发同学来说，就算不使用，也强烈建议使用提供注解，它会通过一些类型推导来检查你的代码的正确性，可以减少很多开发过程中的。相对于对象，它保证了输入的类型你定义的对象可能某一天不再只有类型的，不再需要额外的类型判断。作者：陈达孚香港中文大学研究生,《移动Web前端高效开发实战》作者之一，《前端开发者指南2017》译者之一，在中国前端开发者大会,中生代技术大会等技术...

jokester 2019-08-21 17:56 评论0 收藏0
漫谈前端之路

摘要：那么的学习就相对来说很自由了，可以跟着网址过一遍标签，网上也有很多其它网站做这个的，像菜鸟教程慕课网视频之类的都可以用等熟练了就可以去国外看看一些前端的新技术，像国际，最大的程序员问答网站。前言前端之路何其漫漫~ 说明：本篇文章原是写给学弟学妹的，但想来花的功夫确实不少，就把此篇文章当做自己的一个阶段性总结文章了，会保持长期更新。 HTML 总的来说HTML并不难，...

qujian 2019-08-19 17:47 评论0 收藏0
漫谈前端之路

摘要：那么的学习就相对来说很自由了，可以跟着网址过一遍标签，网上也有很多其它网站做这个的，像菜鸟教程慕课网视频之类的都可以用等熟练了就可以去国外看看一些前端的新技术，像国际，最大的程序员问答网站。前言前端之路何其漫漫~ 说明：本篇文章原是写给学弟学妹的，但想来花的功夫确实不少，就把此篇文章当做自己的一个阶段性总结文章了，会保持长期更新。 HTML 总的来说HTML并不难，...

番茄西红柿 2019-08-30 12:50 评论0 收藏0
漫谈前端之路

摘要：那么的学习就相对来说很自由了，可以跟着网址过一遍标签，网上也有很多其它网站做这个的，像菜鸟教程慕课网视频之类的都可以用等熟练了就可以去国外看看一些前端的新技术，像国际，最大的程序员问答网站。前言前端之路何其漫漫~ 说明：本篇文章原是写给学弟学妹的，但想来花的功夫确实不少，就把此篇文章当做自己的一个阶段性总结文章了，会保持长期更新。 HTML 总的来说HTML并不难，...

BakerJ 2019-08-01 15:07 评论0 收藏0
漫谈前端之路

摘要：那么的学习就相对来说很自由了，可以跟着网址过一遍标签，网上也有很多其它网站做这个的，像菜鸟教程慕课网视频之类的都可以用等熟练了就可以去国外看看一些前端的新技术，像国际，最大的程序员问答网站。前言前端之路何其漫漫~ 说明：本篇文章原是写给学弟学妹的，但想来花的功夫确实不少，就把此篇文章当做自己的一个阶段性总结文章了，会保持长期更新。 HTML 总的来说HTML并不难，...

RdouTyping 2019-06-27 12:07 评论0 收藏0