miniprogram-to-uniapp使用指南（微信小程序项目转换为uni-app项目）

一、它是谁？

【miniprogram-to-uniapp】 ，有点后悔取这么长的名字，打得来麻烦，最新版本为【 v1.0.19 】。

 

二、它能做什么？

目前能转换“微信小程序” 和“微信小程序带云函数”项目 ==> uni-app项目。

 

三、它的原理是什么？（过段时间会有一篇关于此工具的文章，敬请期待）

最初是学了半节课堆和栈，觉得词法分析挺有意思的，再加上转换小程序插件时，发现这些繁琐的操作完全可以使用程序来完成。
核心是使用Babel获取AST（词法分析)，然后或使用Babel自带函数增删，或正则分析替换等等操作。
可能有的朋友觉得，这种为啥不是纯正则分析？ 纯正则可以解决一部分问题，对于标签与标签内容，其实正则是很难进行区分的哈。

 

四、它做了什么？

1. 解析并合并 [xx.js, xx.wxml, xx.wxss] 为 xx.vue 文件，并对小程序模板语法进行转换，调整生命周期函数，this.setData()转换等；
2. 将所有素材资源移入到static目录，并修复路径
3. 转换<template/>标签和语法import *.wxml的转换
4. 支持workers目录转换
5. 支持wxs文件转换
6. 解析小程序的json配置文件，并组装好uni-app需要的配置文件，生成项目。

 

五、怎么使用？

第一步：在命令行里，运行【 npm install miniprogram-to-uniapp -g 】进行安装，因为这个包是工具，要求全局都能使用，所以需要-g进行全局安装。

如果运行npm报错，请先安装Node.js，下载地址：https://nodejs.org/zh-cn/

第二步：继续在命令行里，运行【 wtu -V 】，执行结果如下：

显示1.01，说明已经安装成功了。（wtu -> 取自wx to uni之意，后面都用这个全局命令）

第三步：在命令行里，输入【wtu -i "你的小程序项目路径"】，注意参数-i后面有一个空格！！！如：【wtu -i "E:\zpWork\Project_self\miniprogram-to-uniapp\test\test-wx-to-uni"】 ，回车后即可以在源项目同及目录得到一个后缀为_uni的目录，即转换成功。见下图：

转换前：

转换后：

转换后的项目文件对比（左边是小程序项目，右边是Uni-app项目目录）：

 

工具升级

因为工具更新比较频繁，安装后，可以使用如下命令进行升级：
npm update miniprogram-to-uniapp -g

 

注意：

1. 已知问题已经附于README里，请详细阅读。
2. github上面的只是源代码。 日常使用，需要运行【 npm install miniprogram-to-uniapp -g 】进行安装才行。
3. 每次转换时都会将输出目录清空，请注意代码保存。
4. 目前转换后的项目并不完美，目前成功的是微信小程序的默认新建项目和云函数项目。
5. 后续会有版本更新，请及时关注并更新~~
 

this.setData()代码出处：https://ask.dcloud.net.cn/article/35020，在些表示感谢~   

如有遇到bug或问题，欢迎评论、给出改进建议，感谢~~

 

### 转换工具源码：https://github.com/zhangdaren/miniprogram-to-uniapp ，欢迎star和建议~