Skip to content

tyonly/miniprogram-to-uniapp

 
 

Repository files navigation

转换各种小程序为 uni-app 项目

支持转换微信、QQ、头条/抖音、支付宝/钉钉和百度等小程序转换到 uni-app 项目

输入小程序项目路径,即可输出 uni-app 项目。

PS: 目前工具转换支持度最好的为:微信小程序和QQ小程序。

同时支持 Npm 安装 和 HbuilderX 插件(不依赖环境) 两种形式安装,安装方式如下:

Npm 安装

$ npm install miniprogram-to-uniapp -g

使用方法

Usage: wtu [options]

Options:

  -V, --version          output the version number [版本信息]
  -i, --input <target>   the input path for weixin miniprogram project [输入目录]
  -h, --help             output usage information [帮助信息]
  -c, --cli              the type of output project is vue-cli, which default value is false [是否转换为vue-cli项目,默认false]
  -w, --wxs              transform wxs file to js file, which default value is false [是否将wxs文件转换为js文件,默认false]
  -z, --vant             transform vant-weapp project to uni-app, automatic check [是否支持转换vant项目,默认为false]
  -r, --rename           rename wx.xxx() to uni.xxx(), which default value is true [是否转换wx.xxx()为uni.xxx(),默认true]
  -m, --merge            merge wxss file into vue file, which default value is false [是否合并wxss到vue文件,默认false]
  -f, --repair           repair javascript, which default value is false [是否对混淆过的js进行尽可能还原,默认false]

示例:

默认转换:
$ wtu -i ./miniprogram-project
vant 小程序转换为 uni-app 项目:
$ wtu -i ./miniprogram-project -z
将 wxss 合并入 vue 文件:
$ wtu -i ./miniprogram-project -m
转换项目为vue-cli项目:
$ wtu -i ./miniprogram-project -c
尽可能修复压缩混淆代码(实验阶段):
$ wtu -i ./miniprogram-project -f

HbuilderX 插件安装

请参考项目:【HBuilder X 插件】 转换各种小程序为 uni-app 项目 进行食用。

目前这种方式,不支持转换 vant 项目,如需转换 vant 项目,请使用 Npm 安装 方式。

使用指南

本插件详细使用教程,请参照:miniprogram-to-uniapp 使用指南

使用时遇到问题,请仔细阅读: miniprogram to uniapp 工具答疑文档.md

对于使用有疑问或建议,欢迎加入 QQ 群进行指导和反馈。

交流 QQ 群: 1 群:780359397 小程序转uni-app讨论群 (已满) 2 群:361784059 小程序转uniapp研究二群

已完成

  • 支持微信、QQ、头条/抖音、支付宝/钉钉和百度等小程序转换到 uni-app 项目
  • 支持有/无云开发的小程序项目转换为 uni-app 项目
  • 支持解析 TypeScript 小程序项目
  • 支持解析使用 npm 模块的小程序项目
  • 支持解析 include 标签
  • 支持解析 template 标签
  • 支持解析 Behavior 文件为 mixins 文件
  • 合并使用 require 导入的 wxs 文件
  • setData() polyfill, setData 函数无须另外处理!
  • 支持识别 App、Page、Component、VantComponent、Behavior 和纯 Javascript 文件的转换
  • 使用mp-html替换 wxParse(感谢网友 “爱瑞巴勒康忙北鼻” 的建议)
  • 将所有非 static 目录下资源文件移入 static 目录,并修复所有能修复到的路径
  • 对代码语法做了大量的兼容,如修复变量名与函数重名的情况等
  • 对混淆代码进行语义化分析,并作反混淆处理
  • 搜索template和setData里未声明的变量,智能识别变量类型,并在data里面进行声明!

不支持转换的功能及组件

  • 不支持转换使用 uni-app 发布的小程序项目
  • 不支持转换使用 redux 开发的小程序(代表为:网易云信小程序 DEMO)
  • 不支持转换使用 wxpage 开发的小程序(https://github.com/tvfe/wxpage)
  • 不支持转换使用腾讯 omi 开发的小程序(https://github.com/Tencent/omi)
  • 不支持转换小程序抽象节点 componentGenerics
  • 不支持转换组件间关系relations
  • 不支持转换 echarts 组件,需手动替换 echarts 为其他组件
  • 不支持 component 里的 pageLifetimes 生命周期,请手动绕过
  • 不支持使用 js 系统关键字作为函数或变量名(如 default、import、return、switch、continue、delete 等)
  • 不支持以$开头的变量名称,如 Page({data:{$data:{name:"hello"}}}) ,刚好$data 是 vue 内置变量,so 不支持,需手动修复
  • 不支持以动态绑定的函数<input @input="test{{index+1}}">,需手动修复
  • 更多,请参照miniprogram to uniapp 工具答疑

更新记录

v1.1.4(20210622)

  • [新增] observer多个值时的处理
  • [新增] observer转换后默认配置为:immediate和deep
  • [新增] if("" != r && void 0 != r){} ==> if(r){}
  • [修复] 尝试修复wx:for-item="index"的情况 ...等等

v1.1.3(20210615)

  • [新增] var 一行声明拆成多行声明
  • [修复] 生成css附带source map的bug
  • [修复] H5平台添加兼容导航栏位置的css错乱的bug
  • [修复] onLoad: function(options = {}){} 解析 报错的bug
  • [修复] 属性为空时未删除的bug(如<view start="{{}}"></view><view class="page_db_1" bindtap="">等)
  • [修复] form-type被莫名加上了冒号(:)的bug(<view :form-type="submit"></view>)
  • [修复] 支持微信小程序”简易双向绑定“转换(<input model:value="{{myValue}}" />--><input v-model="myValue" />)

v1.1.2(20210430)

  • 【重要】 [针对压缩代码]增加 -f 参数,默认为false,用于尽可能修复被混淆过的js代码,提升可读性!
  • 【重要】 [针对压缩代码]三元表达式转换为if表达式(需增加-f参数)
  • 【重要】 [针对压缩代码]getApp及this的变量名语义化(var n = this; ==> var that = this;)
  • 【重要】 增加小程序大部分API函数的Polyfill,尽量避免调试报错,让项目先跑起来!(实验阶段)
  • 【重要】 增加uni.navigateTo、uni.redirectTo不能跳转tabBar页面的Polyfill(不得已而为之)
  • 【重要】 搜索template里未声明的变量,智能识别变量类型,并在data里面进行声明!
  • 【重要】 升级 jyf-parse 为 mp-html v2.1.2(2021-04-24)
  • 【重要】 增加getCurrentPages的处理
  • 【重要】 使用全兼容官方 picker mode=region 城市选择器 v1.0.6(2020-06-16)替换 <picker mode="region"></picker>
  • [新增] 对We UI组件的检测,并给出解决方案
  • [新增] 未定义函数的处理(增加空函数及console提示)
  • [新增] 当css里面含position:fixed且top:0,在H5平台对top增加header的高度
  • [新增] 使用vue-cli模式时,输入路径后面会增加vue-cli标识,以便与hBuilderX模式区分
  • [新增] 创建onLoad的副本refreshPage3389(),接管所有onLoad的调用(解决函数内直接调用onLoad而报错的问题) ……等等一些微小的工作

感谢

参考资料

  1. [AST 实战]从零开始写一个 wepy 转 VUE 的工具 此文获益良多
  2. https://astexplorer.net/ AST 可视化工具
  3. Babylon-AST 初探-代码生成(Create) 系列文章(作者还是个程序媛噢~)
  4. Babel 插件手册 中文版 Babel 插件手册
  5. Babel 官网 有问题直接阅读官方文档哈
  6. 微信小程序转换 uni-app 详细指南 补充了我一些未考虑到的规则。
  7. 更新 babel 版本,命令:npx babel-upgrade --write

最后

如果觉得帮助到你的话,可以支持一下作者,请作者喝杯咖啡哈~ 这样会更有动力更新哈~~ 非常感谢~~

微信支付支付宝支付

LICENSE

This repo is released under the MIT.

About

Try to transform Weixin miniprogram project to Uni-app project

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 63.7%
  • Vue 28.5%
  • Less 7.7%
  • Other 0.1%