微信小程序转换为uni-app项目

输入小程序项目路径，输出uni-app项目。

安装

$ npm install wxtouni -g

升级版本

$ npm update wxtouni -g

使用方法

1、安装完成后再根目录下新建wxTOuni文件
2、把需要转换的微信小程序代码复制到wxTOuni文件夹中
3、在根目录下执行wxtouni命令开始转换
4、把转换后的代码复制到新建的uniapp项目更目录下执行覆盖

使用注意事项

1、除组件components和page,以及根目录的app.js和app.json、app.wxss这些以外的文件都自动屏蔽不做转换
2、转换后并可以直接运行但需要手动更改一些特殊写法
3、项目不需要转换的文件都必须放在utils文件夹中，不然就会被转义，例如请求封装等js
4、文件目录需要包含图片文件assets/utils/pages/components/packPage_?(分包文件，内部结构和pages一样)，因为现在是写死的并没有写成动态的，所以需要用到这个工具，文件目录还需保持一样
5、转换的时候请复制一份代码出来进行转换，因为在转换的过程中会删除一些文件并且不可恢复，请慎重
6、使用HbuilderX工具新建uniapp工具，然后把转换后文件拷贝过来就可以运行了，特别注意：如果是命令行创建的项目会识别不了@根目录设置，所以必须用工具创建
7、转换过来的uniapp项目，如果后端没有跨域就会出险跨域的错误，所以还需要后端接口支持跨域

文件转换

1、将微信小程序原生的js\json\wxml\wxss 四个文件合并转换成uni格式的vue文件，自动添加了uni需要的格式
2、把wxml文件中的一些微信小程序的写法改为vue的写法
3、生命周期的改变
4、组件写法的改变
5、把assets图片文件夹更名为static
6、更改方法事件传值由“data-?=?”形式转换为“@tap=eventName({key:value})”的形式

等等。。。

实现思路

0、利用node的fs文件系统以及path对文件递归循环出每一个文件，保证每一个文件都可以操作到
1、使用babel工具转换AST抽象语法树并在此树中添加和修改代码，最后再转换为浏览器可识别的js代码
2、htmlparser2用这个工具转换wxml文件，并再抽象出的树中做增删改查的操作

实践的结果

1、页面时可以正常显示的，但是在一部分wxml中bind改为@会有些许遗漏，需手动
2、js部分变量赋值可能需要小小的修改下，因为H5有时候识别不到this.a.c=b这种形式需要改为
let a = JSON.parse(JSON.stringify(this.a));
a.c = b 
this.a = a
3、wxs部分的兼容性还是有待提升，虽然我做了引入工作但是可能会识别不到，需要把wxs融入js部分，速度还是体验良好
4、input 组件的闭合标签需手动去掉并添加斜杠结尾，并且在input组件的事件中需要修改传值方式

这些都是需要后期优化，现在只能劳烦手动修改了哦

致谢

其中wxml解析的方式在插件（miniprogram-to-uniapp） https://github.com/zhangdaren/miniprogram-to-uniapp 中找到相关解决办法 感谢作者