關于postcss-weex插件, 讓weex開發更爽一點

qingshanli1988 發布于2019-08-20 18:55 / 851人閱讀

摘要：背景眾所周知，在開發中，的書寫一直是一個痛點。解決思路對于問題，受限于底層的實現，目前并沒有辦法能夠解決。而最簡單地實現方式，就是基于去制作插件。

背景

眾所周知，在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插件開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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