一、它是谁?

【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/

uniapp反向代理有两个JESSIONID uniapp 逆向_正则

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

uniapp反向代理有两个JESSIONID uniapp 逆向_uni-app_02

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

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

转换前:

uniapp反向代理有两个JESSIONID uniapp 逆向_miniprogram_03

转换后:

uniapp反向代理有两个JESSIONID uniapp 逆向_miniprogram_04

转换后的项目文件对比(左边是小程序项目,右边是Uni-app项目目录):

uniapp反向代理有两个JESSIONID uniapp 逆向_正则_05

工具升级

因为工具更新比较频繁,安装后,可以使用如下命令进行升级:
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和建议~