資訊專欄INFORMATION COLUMN
摘要：背景眾所周知，在開發(fā)中，的書寫一直是一個痛點。解決思路對于問題，受限于底層的實現(xiàn)，目前并沒有辦法能夠解決。而最簡單地實現(xiàn)方式，就是基于去制作插件。
背景
眾所周知，在weex開發(fā)中，CSS的書寫一直是一個痛點。主要表現(xiàn)如下：
支持的CSS屬性有限；
不支持簡寫，例如不支持margin: 10px 0，必需要分開寫上下左右四個方向的margin；
在weex中尺寸會根據(jù)實際屏幕尺寸基于750px自動縮放，而web頁面不會，造成視覺效果不一致；
有一些尺寸(如字體，邊框)不需要自動縮放。
解決思路對于問題1，受限于weex底層的實現(xiàn)，目前并沒有辦法能夠解決。
對于問題2，只需要分開寫即可，但是分開寫多多少少會有些不便，同時因為前端開發(fā)人員通常都已經(jīng)習(xí)慣了簡寫的方式，很容易忘記分開寫。如果有一個工具能夠?qū)懞玫腃SS做自動轉(zhuǎn)換，那么問題就解決了。
對于問題3，可以聯(lián)想到weex中的布局方案其實與手淘的flexible布局方案如出一轍，因此只需要一個工具實現(xiàn)同等轉(zhuǎn)換，將CSS中的px轉(zhuǎn)成rem即可。
對于問題4，weex支持一個未在文檔中提及的單位wx，使用wx單位的尺寸不會進(jìn)行縮放，但是需要一個工具對web頁面進(jìn)行等同處理，否則還是無法達(dá)到一致。
解決方案由上可知，其實只需要對CSS作一些轉(zhuǎn)換，就可以完美解決問題2、3、4。而最簡單地實現(xiàn)方式，就是基于postcss去制作插件。因為postcss除了將CSS文件抽象成AST，還提供了對AST的遍歷，我們只需要傳入一個回調(diào)函數(shù)來對接收的內(nèi)容作簡單的處理即可。同時postcss還提供了一些實用的API來操作AST，于是基于postcss的插件postcss-weex便應(yīng)運而生了。
因此，你只需要在你的webpack配置文件中添加postcss-weex的相關(guān)配置即可。
對于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。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84876.html
摘要：一個帶提示的最后對于開發(fā)同學(xué)來說，就算不使用，也強(qiáng)烈建議使用提供注解，它會通過一些類型推導(dǎo)來檢查你的代碼的正確性，可以減少很多開發(fā)過程中的。相對于對象，它保證了輸入的類型你定義的對象可能某一天不再只有類型的，不再需要額外的類型判斷。 作者：陳達(dá)孚 香港中文大學(xué)研究生,《移動Web前端高效開發(fā)實戰(zhàn)》作者之一，《前端開發(fā)者指南2017》譯者之一，在中國前端開發(fā)者大會,中生代技術(shù)大會等技術(shù)...
摘要：那么的學(xué)習(xí)就相對來說很自由了，可以跟著網(wǎng)址過一遍標(biāo)簽，網(wǎng)上也有很多其它網(wǎng)站做這個的，像菜鳥教程慕課網(wǎng)視頻之類的都可以用等熟練了就可以去國外看看一些前端的新技術(shù)，像國際，最大的程序員問答網(wǎng)站。 前言 前端之路何其漫漫~ ????說明：本篇文章原是寫給學(xué)弟學(xué)妹的，但想來花的功夫確實不少，就把此篇文章當(dāng)做自己的一個階段性總結(jié)文章了，會保持長期更新。 HTML ????總的來說HTML并不難，...
閱讀 3787·2021-11-25 09:43
閱讀 2206·2021-11-23 10:13
閱讀 838·2021-11-16 11:44
閱讀 2385·2019-08-29 17:24
閱讀 1396·2019-08-29 17:17
閱讀 3493·2019-08-29 11:30
閱讀 2597·2019-08-26 13:23
閱讀 2360·2019-08-26 12:10
