输入小程序项目路径,输出uni-app项目。
实现项目下面的js+wxml+wxss转换为vue文件,模板语法、生命周期函数等进行相应转换,其他文件原样复制,生成uni-app所需要的配置文件。
$ npm install miniprogram-to-uniapp -g
Usage: wtu [options]
Options:
-V, --version output the version number
-i, --input the input path for weixin miniprogram project
-o, --output the output path for uni-app project, which default value is process.cwd()
-h, --help output usage information
Examples:
$ wtu -i miniprogramProject
基本参照大佬的文章:微信小程序转换uni-app详细指南。
因为小程序与uni/vue的语法以及文件结构都有很大的差别,所以做了很多的优化工作,后面再补。
ps: 值得注意的是app.js里根级属性也会被转换进data里,如:
const baidu = require('./utils/baidu.js');
App({baidu:baidu})
转换为:
const baidu = require('./utils/baidu.js');
App({
data() {
return {
baidu: baidu
}
}
})
- 支持含云开发的小程序项目(有云开发与无云开发的项目的目录结构有差别)
- 支持['btn/btn.js', 'btn/btn.wxml', 'btn/btn.wxss']或['btn/btn.js', 'btn/btn.wxml' || 'btn/btn.wxss']转换为'btn/btn.vue' ,模板语法、生命周期函数等进行相应转换
- 支持['util/util.js']复制为['util/util.js'],原样复制,仅对import的模块进行后缀名修改
- 支持['wxss/1.wxss']复制为['wxss/1.css'],原样复制,仅对import的模块进行后缀名修改
- 支持生命周期函数的转换
- 支持同一目录下有不同名js/wxml/wxss文件转换
- 区分app.js/component,两者解析规则略有不同
- 替换rpx为upx
- this.SetData({aa:"123", bb:"456"}); 转换为this.aa="123"; this.bb="456";
- [todo] js里含有ES6的解构语法(...)时,会解析报错
- [todo] wxml含有import语法时(),此行未转换,仅原样复制
- [todo] 配置参数,支持指定目录、指定文件方式进行转换
- [todo] 文件操作的同步方法添加try catch
- [todo] 未去掉转换产生的空生命周期
- [todo] bind:click未简写的情况
- [todo] getApp()的支持
感谢转转大佬的文章:[AST实战]从零开始写一个wepy转VUE的工具,本项目基于此文章里面的代码开发,在此表示感谢~
感谢网友[没有好名字了]给予帮助。
感谢官方大佬DCloud_heavensoft的文章:微信小程序转换uni-app详细指南,补充了我一些未考虑到的规则。
0.[AST实战]从零开始写一个wepy转VUE的工具 此文获益良多
1.https://astexplorer.net/ AST可视化工具
2.Babylon-AST初探-代码生成(Create) 系列文章(作者是个程序媛噢~)
3.Babel 插件手册 中文版Babel插件手册
5.Babel官网 有问题直接阅读官方文档哈
6.微信小程序转换uni-app详细指南 补充了我一些未考虑到的规则。
This repo is released under the MIT.