VUE 组件转换为微信小程序组件的方法

那 CSS 我们也是必须要处理的一部分，let try

以下是我们要处理的css样本

const code = `
 .text-ok{
  position: absolute;
  right: 150px;
  color: #e4393c;
  }
 .nut-popup-close{
  position: absolute;
  top: 50px;
  right: 120px;
  width: 50%;
  height: 200px;
  display: inline-block;
  font-size: 26px;
 }`;

处理后我们得到的

.text-ok {
 position: absolute;
 right: 351rpx;
 color: #e4393c;
}
.nut-popup-close {
 position: absolute;
 top: 117rpx;
 right: 280.79rpx;
 width: 50%;
 height: 468rpx;
 display: inline-block;
 font-size: 60.84rpx;
}

通过前后代码的对比，我们看到了单位尺寸的转换（比如：top: 50px; 转换为 top: 117rpx;）。

单位的转换( px 转为了 rpx )

CSS 又做了哪些处理呢？

同样也有不少的 CSS Code Parsers 供我们选择 Cssom ，CssTree等等，

我们拿 Cssom 来实现上方css代码的一个简单的转换。

var ast = csstree.parse(code);
  csstree.walk(ast, function(node) {
   if(typeof node.value == "string" && isNaN(node.value) != true){
    let newVal = Math.floor((node.value*2.34) * 100) / 100;//转换比例这个根据情况设置即可
     if(node.type === "Dimension"){//得到要转换的数字尺寸
      node.value = newVal;
     }
   }
   if(node.unit === "px"){//单位的处理
    node.unit = "rpx"
   }
 });
 console.log(csstree.generate(ast));

当然这只是一个 demo，实际项目中使用还的根据项目的实际情况出发，SCSS，LESS等等的转换与考虑不同的处理场景哦！

注：本文有些模块的转换实现还未在小程序开发工具中测试。

插播一个通过 AST 实现的好东东：

将 JavaScript 代码转化生成 SVG 流程图 js2flowchart( 4.5 k stars 在 GitHub )
当你拥有 AST 时，可以做任何你想要做的事。把AST转回成字符串代码并不是必要的，你可以通过它画一个流程图，或者其它你想要的东西。

js2flowchart使用场景是什么呢？通过流程图，你可以解释你的代码，或者给你代码写文档；通过可视化的解释学习其他人的代码；通过简单的js语法，为每个处理过程简单的描述创建流程图。

马上用最简单的方式尝试一下吧，去线上编辑看看 js-code-to-svg-flowchart [8]。

此处有必要附上截图一张。

八、总结：

通过以上我们的介绍，我们大概对抽象语法树有了初步的了解。总体思路是：我们用Babel的解析器 把 JavaScript 源码转化为抽象语法树，