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

//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 组件转换为微信小程序组件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/05a528f1ccbb158eb13b1a8e2c63ec99.html