经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
VUE 组件转换为微信小程序组件的方法
来源：jb51　　时间：2019/11/6 9:48:46　　对本文有异议

简介：

首先我们介绍一下本文的关键点：抽象语法树，它是以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

通过操作这棵树，可以精确的定位到声明、赋值、运算语句，从而实现对代码的优化、变更等操作。

本文通过对 VUE 组件的 JavaScript 、CSS模块进行转换，比如 JavaScript模块，包括外层对象，生命周期钩子函数，赋值语句，组件的内部数据，组件的对外属性等等来实现把一个 VUE 组件转换为 一个小程序组件。

AST 抽象语法树，似乎我们平时并不会接触到。实际上在我们的项目当中，CSS 预处理，JSX 亦或是 TypeScript 的处理，代码格式化美化工具，Eslint， Javascript 转译，代码压缩，Webpack， Vue-Cli，ES6 转 ES5，当中都离不开 AST 抽象语法树这个绿巨人。先卖个关子，让我们看一下 AST 到的官方解释：

It is a hierarchical program representation that presents source code structure according to the grammar of a programming language, each AST node corresponds to an item of a source code.

中文的解释有：

抽象语法树（abstract syntax tree或者缩写为 AST ），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。和抽象语法树相对的是具体语法树（concrete syntaxtree），通常称作分析树（parse tree）。一般的，在源代码的翻译和编译过程中，语法分析器创建出分析树。一旦 AST 被创建出来，在后续的处理过程中，比如语义分析阶段，会添加一些信息。

抽象语法树，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

通过操作这棵树，可以精确的定位到声明、赋值、运算语句，从而实现对代码的优化、变更等操作。这些并不是我们想要看到的。

对于 AST 面纱的神秘感，似乎已经将要揭开。不错，在我刚接触到他的时候，同样感觉确实是难。但是当你开始了解了它以后，你就会越来越喜欢它。

因为他实在太强大了。AST 本身并不难，难点在于转换的目标对象与源对象的语法差异，当中水深毋庸置疑。但是，这才能更加激起我们探索他的欲望。在开始之前，我们先看一下 抽象语法树到底长什么样子。

一、 一探究竟 AST

通过 astexplorer [1] （AST树查看网站），通过他你可以方便的查看代码的语法树，挑你喜欢的库。你可以在线把玩 AST，而且除了 JavaScript，HTML， CSS 还有很多其它语言的 AST 库，让我们对他有一个感性而直观的认识。

请看下图，看看AST语法树长什么样子：

此图看到的是一个 ExportDefaultDeclaration 也就是export default {}，还有他的位置信息，注释失信，tokens等等。

国际惯例，先来一个小demo

输入数据

  1. function square(n) {
  2.  return n * n;
  3. }

处理数据

  1. astFn() {
  2.   const code = `function square(n) {
  3.     return n * n;
  4.    }`;
  5.   //得到 AST 语法树
  6.   const ast = babylon.parse(code);
  7.  
  8.   traverse(ast, {
  9.    enter(path) {
  10.     console.log("enter: " + path.node.type);
  11.     //如下的语句匹配到 return 中的 n 与参数 n，并且将它替换为 x。
  12.     if (path.node.type === "Identifier" && path.node.name === "n") {
  13.      path.node.name = "x";
  14.     }
  15.    }
  16.   });
  17.   generate(ast, {}, code);//将 AST 转换为代码
  18.   console.log(generate(ast, {}, code).code );//打印出转换后的 JavaScript 代码
  19.  }

输出数据

  1. function square(x) {
  2.  return x * x;
  3. }

我们看一下我们得到的 AST 树

接下来我们插入一段 把 VUE 组件转换为微信小程序组件正则版本的处理

二、 简单粗暴的版本（VUE 组件转换为微信小程序组件）

没有使用 AST 将 VUE 组件转换成小程序组件的简易版本介绍

下方是两段代码，简单的逻辑，实现思路，匹配目标字符串，替换字符，然后生成文件。

  1. regs:{//通过标签匹配来替换对应的小程序支持的标签
  2.  toViewStartTags: /(<h1)|(<s)|(<em)|(<ul)|(<li)|(<dl)|(<i)|(<span)/g,
  3.  toViewEndTags: /(<\/h1>)|(<\/s>)|(<\/em>)|(<\/ul>)|(<\/li>)|(<\/dl>)|(<\/i>)|(<\/span>)/g,
  4.  toBlockStartTags: /(<div)|(<p)/g,
  5.  toBlockEndTags: /(<\/div>)|(<\/p>)/g,
  6. },
  7. signObj: {//通过标签查找来分离脚本，模板和CSS
  8.  tempStart: '<template>',
  9.  tempEnd: '</template>',
  10.  styleStart: '<style scoped>',
  11.  styleEnd: '</style>',
  12.  scriptStart: '<script>',
  13.  scriptEnd: '</script>'
  14. }


上方是正则版本的一些模板匹配规则，经过后续的一系列处理把一个 VUE组件处理得到对应的小程序的 WXML ，WXSS，JSON，JS，4个文件。

  1. //文件
  2. const wxssFilePath = path.join(dirPath, `${mpFile}.wxss`);
  3. const jsFilePath = path.join(dirPath, `${mpFile}.js`);
  4. const wxmlFilePath = path.join(dirPath, `${mpFile}.wxml`);
  5. const jsonFilePath = path.join(dirPath, `${mpFile}.json`);
  6. if (!fs.existsSync(dirPath)) {
  7.  fs.mkdirSync(dirPath);
  8. }
  9. fs.writeFile(wxssFilePath, wxssContent, err => {
  10.  if (err) throw err;
  11.  //console.log(`dist目录下生成${mpFile}.wxss文件成功`);
  12.  fs.writeFile(jsFilePath, jsContent, err => {
  13.  if (err) throw err;
  14.     // console.log(`dist目录下生成${mpFile}.js文件成功`);
  15.     fs.writeFile(wxmlFilePath, wxmlContent, err => {
  16.      if (err) throw err;
  17.      //console.log(`dist目录下生成${mpFile}.wxml文件成功`);
  18.      fs.writeFile(jsonFilePath, jsonContent, err => {
  19.       if (err) throw err;
  20.       console.log(`dist目录下生成${mpFile}.json文件成功`)
  21.       resolve(`生成${mpFile}.json文件成功`);
  22.      })
  23.     })
  24.   });
  25. });

上方是处理得到的 WXML ，WXSS，JSON，JS，4个文件，并且生成到对应的目录下。代码实现用时较短，后续更改方案，并没有做优化，这里就不做详细展开讨论这个实现方案了。

回到正题 介绍一下，AST 抽象语法树的核心部分：

三、 抽象语法树三大法宝

Babel 是 JavaScript 编译器，更确切地说是源码到源码的编译器，通常也叫做“ 转换编译器（transpiler）”。 意思是说你为 Babel 提供一些 JavaScript 代码，Babel 更改这些代码，然后返回给你新生成的代码。

babel-core：Babel 的编译器；它暴露了 babel.transform 方法。

[1] babylon：Babylon 是 Babel 的解析器。用于生成 AST 语法树。

[2] babel-traverse：Babel 的遍历器，所有的transformers都使用该工具遍历所有的 AST (抽象语法树)，维护了整棵树的状态，并且负责替换、移除和添加节点。我们可以和 Babylon 一起使用来遍历和更新节点。

[3] babel-generator：Babel 的代码生成器。它读取AST并将其转换为代码。

整个编译器就被分成了三部分：分析器、转换器、生成器，大致的流程是：

输入字符串 -> babylon分析器 parse -> 得到 AST -> 转换器 -> 得到 AST -> babel-generator -> 输出

总结核心三步：

AST 三大法宝

babylon.parse => traverse 转换 AST => generate(ast, {}, code).code) 生成

感兴趣的童鞋，可以在网上或者看参考资料都有介绍。该铺垫的都铺垫的差不多了，进入正题。

我们到底是如何通过 AST 将 VUE 组件转换为微信小程序组件的呢？

四、 VUE 组件转换为微信小程序组件中 组件的对外属性、赋值语句的转换处理

转换之前的 VUE 组件代码 Demo

  1. export default {
  2.        //组件的对外属性
  3.        props: {
  4.          max: {
  5.            type: Number,
  6.            value: 99
  7.          }
  8.        },
  9.        //组件的内部数据
  10.        data(){
  11.          return {
  12.           num:10000
  13.          }
  14.        },
  15.        //组件的方法
  16.        methods: {
  17.          textFn() {
  18.           this.num = 2
  19.         },
  20.          onMyButtonTap: function(){
  21.          this.num = 666
  22.         },
  23.        }
  24.       }

处理后我们得到的微信小程序组件 JavaScript 部分代码

  1. export default {
  2.  properties: {
  3.   //组件的对外属性
  4.   max: {
  5.    type: Number,
  6.    value: 99
  7.   }
  8.  },
  9.  //组件的内部数据
  10.  data(){
  11.   return {
  12.    num: 10000
  13.   }
  14.  },
  15.  //组件的方法
  16.  methods: {
  17.   textFn() {
  18.    this.setData({
  19.     num: 2
  20.    });
  21.   },
  22.   onMyButtonTap: function () {
  23.    this.setData({
  24.     num: 666
  25.    });
  26.   }
  27.  }
  28. };

我们对js动了什么手脚(亦可封装成babel插件):

  1. //to AST
  2. const ast = babylon.parse(code, {
  3.  sourceType: "module",
  4.  plugins: ["flow"]
  5. });
  6.  
  7. //AST 转换 node，nodetype很关键
  8. traverse(ast, {
  9.   enter(path) {
  10.    //打印出node.type
  11.    console.log("enter: " + path.node.type);
  12.   }
  13. })
  14.  
  15. ObjectProperty(path) {
  16.   //props 替换为 properties
  17.   if (path.node.key.name === "props") {
  18.    path.node.key.name = "properties";
  19.   }
  20. }
  21.  
  22. //修改methods中使用到数据属性的方法中。this.prop至this.data.prop等 与 this.setData的处理。
  23. MemberExpression(path) {
  24.  let datasVals = datas.map((item,index) =>{
  25.   return item.key.name //拿到data属性中的第一级
  26.  })
  27.  if (//含有this的表达式 并且包含data属性
  28.   path.node.object.type === "ThisExpression" &&
  29.   datasVals.includes(path.node.property.name)
  30.  ) {
  31.   path.get("object").replaceWithSourceString("this.data");
  32.   //判断是不是赋值操作
  33.   if (
  34.    (t.isAssignmentExpression(path.parentPath) &&
  35.     path.parentPath.get("left") === path) ||
  36.    t.isUpdateExpression(path.parentPath)
  37.   ) {
  38.    const expressionStatement = path.findParent(parent =>
  39.     parent.isExpressionStatement()
  40.    );
  41.    //......
  42.   }
  43.  }
  44. }

转换之前的js代码的部分 AST 树：

具体的 API 使用，童鞋们看一下 babel 相关的文档了解一下。

五， VUE 组件转换为微信小程序组件中 Export Default 到 Component 构造器的转换 与 生命周期钩子函数，事件函数的处理

首先我们看一下要转换前后的语法树与代码如下（明确转换目标）：

转换之前的 AST 树与代码

  1. export default {// VUE 组件的惯用写法用于导出对象模块
  2.   data(){
  3.   },
  4.   methods:{
  5.   },
  6.   props:{
  7.   }
  8. }

转换之后的 AST 树与代码

  1. components({//小程序组件的构造器
  2.   data(){
  3.   },
  4.   methods:{
  5.   },
  6.   props:{
  7.   }
  8. })

通过以上转换之前和转换之后代码和 AST 的对比我们明确了转换目标就是 ExportDefault 到 Component构造器的转换，下面看一下我们是如何处理的：

我们做了什么（在转换中进入到 ExportDefault 中做对应的处理）:

  1. //ExportDefault 到 Component构造器的转换
  2. ExportDefaultDeclaration(path) {
  3. //创建 CallExpression Component({})
  4. function insertBeforeFn(path) {
  5.  const objectExpression = t.objectExpression(propertiesAST);
  6.  test = t.expressionStatement(
  7.    t.callExpression(//创建名为 Compontents 的调用表达式，参数为 objectExpression
  8.      t.identifier("Compontents"),[
  9.       objectExpression
  10.      ]
  11.    )
  12.  );
  13.  //最终得到的语法树
  14.  console.log("test",test)
  15. }
  16. if (path.node.type === "ExportDefaultDeclaration") {
  17.  if (path.node.declaration.properties) {
  18.   //提取属性并存储
  19.   propertiesAST = path.node.declaration.properties;
  20.   //创建 AST 包裹对象
  21.   insertBeforeFn(path);      
  22.  }
  23.  //得到我们最终的转换结果
  24.  console.log(generate(test, {}, code).code);

对于 ExportDefault => Component 构造器转换还有一种转换思路 下面我们看一下：

[1] 第一种思路是先提取 ExportDefault 内部所有节点的 AST ，并做处理，然后创建Component构造器，插入提取处理后的 AST，得到最终的 AST

  1. //propertiesAST 这个就是我们拿到的 AST，然后在对应的分支内做对应的处理 以下分别为 data，methods，props，其他的钩子同样处理即可
  2. propertiesAST.map((item, index) => {
  3.  if (item.type === "ObjectProperty") {
  4.   //props 替换为 properties
  5.   if (item.key.name === "props") {
  6.    item.key.name = "properties";
  7.   }
  8.  } else if (item.type === "ObjectMethod") {
  9.    if (path.node.key.name === "mounted") {
  10.      path.node.key.name = "ready";
  11.     } else if (path.node.key.name === "created") {
  12.      path.node.key.name = "attached";
  13.     } else if (path.node.key.name === "destroyed") {
  14.      path.node.key.name = "detached";
  15.     } else if (path.node.type === "ThisExpression") {
  16.       if (path.parent.property.name === "$emit") {
  17.       path.parent.property.name = "triggerEvent";
  18.       }
  19.     } else {
  20.      void null;
  21.     }
  22.    }
  23.  } else if (path.node.key.name === "methods") {
  24.    path.traverse({
  25.     enter(path) {
  26.       if (path.node.type === "ThisExpression") {
  27.        if (path.parent.property.name === "$emit") {
  28.         path.parent.property.name = "triggerEvent";
  29.        }
  30.       }
  31.     }
  32.    })
  33.  }
  34.  else {
  35.   //...
  36.   console.log("node type", item.type);
  37.  }
  38. });

[2] 第二种思路呢，就是我们上面展示的这种，不过有一个关键的地方要注意一下：

  1. //我把 ExportDefaultDeclaration 的处理放到最后来执行，拿到 AST 首先进行转换。然后在创建得到新的小程序组件JS部分的 AST 即可
  2. traverse(ast, {
  3.    enter(path) {},
  4.    ObjectProperty(path) {},
  5.    ObjectMethod(path) {},
  6.    //......
  7.    ExportDefaultDeclaration(path) {
  8.    //...
  9.    }
  10. })

如果你想在 AST 开始处与结尾处插入，可使用 path 操作：

  1. path.insertBefore(
  2.  t.expressionStatement(t.stringLiteral("start.."))
  3. );
  4. path.insertAfter(
  5.  t.expressionStatement(t.stringLiteral("end.."))
  6. );

注：关于微信小程序不支持 computed , 与 watch，我们具体的初期采用的方案是挂载 computed 和 watch 方法到每一个微信小程序组件，让小程序组件也支持这两个功能。

六，VUE 组件转换为微信小程序组件中 的 Data 部分的处理：

关于 Data 部分的处理实际上就是：函数表达式转换为对象表达式 （FunctionExpression 转换为 ObjectExpression）

转换之前的 JavaScript 代码

  1. export default {
  2.   data(){//函数表达式
  3.    return {
  4.     num: 10000,
  5.     arr: [1, 2, 3],
  6.     obj: {
  7.      d1: "val1",
  8.      d2: "val2"
  9.     }
  10.    }
  11.   }
  12. }

处理后我们得到的

  1. export default {
  2.  data: {//对象表达式
  3.   num: 10000,
  4.   arr: [1, 2, 3],
  5.   obj: {
  6.    d1: "val1",
  7.    d2: "val2"
  8.   }
  9.  }
  10. };

通过如上的代码对比，我们看到了我们的转换前后代码的变化：

转换前后 AST 树对比图明确转换目标：

我们对 JavaScript 动了什么手脚(亦可封装成babel插件):

  1. const ast = babylon.parse(code, {
  2.  sourceType: "module",
  3.  plugins: ["flow"]
  4. });
  5.  
  6. //AST 转换node、nodetype很关键
  7. traverse(ast, {
  8.  enter(path) {
  9.   //打印出node.type
  10.   console.log("enter: " + path.node.type);
  11.  }
  12. })

我们的转换部分都尽量在一个 Traverse 中处理，减少 AST 树遍历的性能消耗

  1. //Data 函数表达式 转换为 Object
  2. ObjectMethod(path) {
  3.  // console.log("path.node ",path.node )// data, add, textFn
  4.  if (path.node.key.name === "data") {
  5.   // 获取第一级的 BlockStatement，也就是 Data 函数体
  6.   path.traverse({
  7.    BlockStatement(p) {
  8.     //从 Data 中提取数据属性
  9.     datas = p.node.body[0].argument.properties;
  10.    }
  11.   });
  12.   //创建对象表达式
  13.   const objectExpression = t.objectExpression(datas);
  14.   //创建 Data 对象并赋值
  15.   const dataProperty = t.objectProperty(
  16.    t.identifier("data"),
  17.    objectExpression
  18.   );
  19.   //插入到原 Data 函数下方
  20.   path.insertAfter(dataProperty);
  21.   //删除原 Data 函数节点
  22.   path.remove();
  23.  }
  24. }

七，VUE 组件转换为微信小程序组件中 CSS 部分的处理：

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

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

  1. const code = `
  2.  .text-ok{
  3.   position: absolute;
  4.   right: 150px;
  5.   color: #e4393c;
  6.   }
  7.  .nut-popup-close{
  8.   position: absolute;
  9.   top: 50px;
  10.   right: 120px;
  11.   width: 50%;
  12.   height: 200px;
  13.   display: inline-block;
  14.   font-size: 26px;
  15.  }`;

处理后我们得到的

  1. .text-ok {
  2.  position: absolute;
  3.  right: 351rpx;
  4.  color: #e4393c;
  5. }
  6.  
  7. .nut-popup-close {
  8.  position: absolute;
  9.  top: 117rpx;
  10.  right: 280.79rpx;
  11.  width: 50%;
  12.  height: 468rpx;
  13.  display: inline-block;
  14.  font-size: 60.84rpx;
  15. }

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

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

CSS 又做了哪些处理呢？

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

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

  1. var ast = csstree.parse(code);
  2.   csstree.walk(ast, function(node) {
  3.    if(typeof node.value == "string" && isNaN(node.value) != true){
  4.     let newVal = Math.floor((node.value*2.34) * 100) / 100;//转换比例这个根据情况设置即可
  5.      if(node.type === "Dimension"){//得到要转换的数字尺寸
  6.       node.value = newVal;
  7.      }
  8.    }
  9.    if(node.unit === "px"){//单位的处理
  10.     node.unit = "rpx"
  11.    }
  12.  });
  13.  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 组件转换为微信小程序组件的转换部分包括如下内容：

  1. VUE 组件 JavaScript模块 对外属性转换为小程序对外属性的处理
  2. VUE 组件 JavaScript模块 内部数据的转换为小程序内部数据的处理
  3. VUE 组件 JavaScript模块 methods 中的赋值语句转换为小程序赋值语句的处理
  4. VUE 组件 JavaScript模块 外层对象，生命周期钩子函数的处理与 CSS 模块的简易处理

总结

以上所述是小编给大家介绍的VUE 组件转换为微信小程序组件的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对w3xue网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号