2.1 Vue template ==> WeiXin *.wxml

虽然项目不大，但是当时拆分的 vue组件 比较细致，导致页面很多。挨个的复制、粘贴、全局替换一系列操作下来，就比较耗时间了。所以在一顿搜索之后，仿照网上大佬们的各种版本，最终总结出自己的一个 vueTemplateToWxml 的编译插件，可以将 html 的标签与属性转换成 wxml 中的标签与属性，并且能够在最小的改动成本下，尽可能的还原之前的代码结构。

原理也比较简单：

• 利用 vue-template-compiler 插件的 parseComponent 方法，可以将 vue 文件的对象结构；
• 再将对象中的 template 对象的 content 内容，交给该插件的 compile 方法去处理，会得到一个 CompiledResult 对象，其中包含该模板的 AST语法树 和 render函数 等信息；
• 最终编写我们自己的处理函数，将 AST语法树 对象编译成真是的 Dom树 结构；

最终的运行效果如下图所示：

2.2 Vue script ==> WeiXin *.js

虽然之前有写过 Vue2 转 微信小程序js 的插件，但现在要转换的项目使用的是 Vue3 的 <script setup> 语法进行编写的，写法上比较简洁，没有像 Vue2 那样在语义上能够明显的区分出 data、props、methods等属性了，所以转换起来比较麻烦。

但好在当时写的代码结构比较清晰，所以我偷了个懒直接选择了直接复制粘贴的形式了。如果后面有兴趣再写一个 Vue3CompileToWxjs 的插件脚本的话，那就再来补充吧。

2.3 Vue style ==> WeiXin *.wxss

因为原本项目使用的是 stylus 预处理器，在写法上是比较粗暴、简洁的，但如果想直接复制到 *.css 文件中使用就比较麻烦了，所以找到了一个 CSS Portal 的网站，里面包含了各种处理 css 的工具。

比如我们就用到了里面的 Stylus to CSS Compiler 编译器，将 stylus 样式代码复制到上面的 Stylus Code 文本框内，点击下面个的 Compile 按钮，即可得到原生的 css 语法。使用方法如下图所示：

这样复制到 *.wxss 文件中就可以使用了，节省了我们大量的高频低效操作。

2.x 总结

到此，一个简单的 *.vue 组件就能够转换为微信所对应的 *.wxml、*.js、*.wxss 文件了，并且样式和事件都相对来说比较完整，已经能够在微信开发者工具中良好的运行起来了。缺失的只是一些动态样式的替换、全局状态管理的维护与引入等问题。再就是一些浏览器的原生API（比如window、document等）在微信环境下是不能用的，需要替换成 微信小程序的API。

系列文章

• Vue3项目转原生小程序插件（一）初始化项目

• Vue3项目转原生小程序插件（二）Vue模板 拆分成 Wx模板

• Vue3项目转原生小程序插件（三）使用 Mobx 替换 Vuex

• Vue3项目转原生小程序插件（四）小程序与插件的事件交互

• Vue3项目转原生小程序插件（五）在插件内使用 Http 与 Websocket

• 更多...