//Data 函数表达式 转换为 Object ObjectMethod(path) { // console.log("path.node ",path.node )// data, add, textFn if (path.node.key.name === "data") { // 获取第一级的 BlockStatement，也就是 Data 函数体 path.traverse({ BlockStatement(p) { //从 Data 中提取数据属性 datas = p.node.body[0].argument.properties; } }); //创建对象表达式 const objectExpression = t.objectExpression(datas); //创建 Data 对象并赋值 const dataProperty = t.objectProperty( t.identifier("data"), objectExpression ); //插入到原 Data 函数下方 path.insertAfter(dataProperty); //删除原 Data 函数节点 path.remove(); } }
七，VUE 组件转换为微信小程序组件中 CSS 部分的处理：
那 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 源码转化为抽象语法树，
再通过 Babel 的遍历器遍历 AST (抽象语法树)，替换、移除和添加节点，得到一个新的 AST 树。最后， 使用，Babel 的代码生成器 Babel Generator 模块 读取 处理后的 AST 并将其转换为代码。任务就完成了！
本文通过对 VUE 组件转换为微信小程序组件的转换部分包括如下内容：
VUE 组件 JavaScript模块 对外属性转换为小程序对外属性的处理
VUE 组件 JavaScript模块 内部数据的转换为小程序内部数据的处理
VUE 组件 JavaScript模块 methods 中的赋值语句转换为小程序赋值语句的处理
VUE 组件 JavaScript模块 外层对象，生命周期钩子函数的处理与 CSS 模块的简易处理
总结
以上所述是小编给大家介绍的VUE 组件转换为微信小程序组件的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: