miniprogram-to-uniapp使用指南(各种小程序项目转换为uni-app项目)

工具现在支持npm全局库、HBuilderX插件两种方式使用,任君选择,HBuilderX插件地址:https://ext.dcloud.net.cn/plugin?id=2656
一、它是谁?
【miniprogram-to-uniapp】转换微信小程序”项目为uni-app项目(新版本工具已经支持各种小程序转换)。

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

三、它能做哪些事情?
支持微信、QQ、头条/抖音、支付宝/钉钉和百度等小程序转换到 uni-app 项目
支持有/无云开发的小程序项目转换为 uni-app 项目(cloudfunctions 目录将被忽略,uni-app 结合小程序云开发见:使用 uni-app 进行微信小程序云开发经验分享)
支持解析 TypeScript 小程序项目
支持解析使用 npm 模块的小程序项目
支持解析 include 标签
支持解析 template 标签
支持解析 Behavior 文件为 mixins 文件
支持.js’, .wxml 和*.wxss 文件进行相应转换,并做了大量的优化
支持识别 App、Page、Component、VantComponent、Behavior 和纯 Javascript 文件的转换
修复变量名与函数重名的情况
合并使用 require 导入的 wxs 文件
setData() polyfill
搜索未在 data 声明,而直接在 setData()里使用的变量,并修复
使用jyf-parser替换 wxParse(感谢网友 “爱瑞巴勒康忙北鼻” 的建议)
因 uni-app 会将所有非 static 目录的资源文件删除,因此将所有资源文件移入 static 目录,并修复所有能修复到的路径(目前 uni 编译时会将非 static 目录的文件复制一份到 static 目录,但并不完全,因此本功能仍保留)
四、它还有哪些不支持转换?
不支持转换反编译后的小程序项目
不支持转换使用 uni-app 编译的小程序项目
不支持转换使用 redux 开发的小程序(代表为:网易云信小程序 DEMO)
不支持转换使用 wxpage 开发的小程序(https://github.com/tvfe/wxpage)
不支持转换使用腾讯 omi 开发的小程序(https://github.com/Tencent/omi)
不支持转换小程序抽象节点 componentGenerics
不支持 component 里的 pageLifetimes 生命周期,请手动绕过
不支持使用 js 系统关键字作为函数或变量名(如 default、import、return、switch 等)
不支持以$开头的变量名称,如 Page({data:{$data:{name:“hello”}}}) ,刚好$data 是 vue 内置变量,so 不支持,需手动修复
不支持以动态绑定的函数<input @input=“test{{index+1}}”>,需手动修复
更多,请参照miniprogram to uniapp 工具答疑
五、怎么使用?
第一步
在命令行里,运行【 npm install miniprogram-to-uniapp -g 】进行安装,因为这个包是工具,要求全局都能使用,所以需要-g进行全局安装。
如果运行npm报错,请先安装Node.js,下载地址:https://nodejs.org/zh-cn/

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

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

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

第四步
将转换后的xxx_uni项目导入到hbuilder X,
点击菜单 运行–> 运行到小程序模拟器–>微信开发者工具!(如果是使用了vant的项目,请运行到H5,vant项目转换后仅支持H5和app)
点击菜单 运行–> 运行到小程序模拟器–>微信开发者工具!(如果是使用了vant的项目,请运行到H5,vant项目转换后仅支持H5和app)
点击菜单 运行–> 运行到小程序模拟器–>微信开发者工具!(如果是使用了vant的项目,请运行到H5,vant项目转换后仅支持H5和app)
重要的话说三遍!
然后查看转换后的项目运行到小程序,是否可以正常运行无报错!
(因为这种转换非100%,所以至少需要保证 小程序–>uniapp–>小程序仍然能正常运行,再考虑运行到其他小程序或app),
如有报错,请根据miniprogram to uniapp 工具答疑 进行修改,保证无报错,然后再运行到其他平台。

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

注意:
遇到问题请参考文档:miniprogram to uniapp 工具答疑
github上面的只是源代码。 日常使用,"仅"需要运行【 npm install miniprogram-to-uniapp -g 】进行安装才行,无需下载工具源码。
每次转换时都会将输出目录清空,请注意代码保存。

miniprogram-to-uniapp使用指南(各种小程序项目转换为uni-app项目)相关推荐

  1. Java后端+Uniapp前端实现的小程序/公众号H5/APP商城+APP商户端源码_JooLun

    JooLun Uniapp商城系统是一款完善的.专业二开的商城源码产品,拥有技术新.价格低.授权宽松等特点.系统后端采用Java语言开发,采用目前流行的Spring Cloud微服务技术,前端采用un ...

  2. uni-app 开发微信小程序 自动化编译,启动项目

    最近开发一个uni-app的小程序项目,因为习惯使用vscode 而项目不得不借助hbuderx 运行,微信开发工具调试,偶尔还需要使用 ios模拟器, 8g内存的mac 就变的异常卡顿,所以就研究了 ...

  3. uni-app.10.开发微信小程序的一些小操作

    开发微信小程序的一些小操作 退出小程序 使用场景 解决方案 navigator 具体使用 参考资料 隐藏主页按钮 使用场景 解决方案 uni.hideHomeButton 参考资料 微信小程序分享 解 ...

  4. 计算机毕业设计Python+uniapp学生考勤系统小程序(小程序+源码+LW)

    计算机毕业设计Python+uniapp学生考勤系统小程序(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程 项目运行 环境配置: Pychram社区版+ pyth ...

  5. 【uni-app】uni-app-微信小程序项目笔记

    目录 1. 项目搭建 1.1 新建项目 1 新增 tabbar 页面 1.2 引入字体图标 1.3 uni-ui 1 uni-ui 介绍 2 uni-ui 使用 1.4 uni-api 介绍 2. 首 ...

  6. 基于uniapp的校园社区小程序

    华软_基于uniapp的仿知乎的校园社区小程序 文章目录 华软_基于uniapp的仿知乎的校园社区小程序 项目下载地址 介绍 软件效果 原理 项目下载地址 介绍 主要是使用uniapp框架搭建微信小程 ...

  7. 计算机毕业设计Python+uniapp校园服务微信小程序(小程序+源码+LW)

    计算机毕业设计Python+uniapp校园服务微信小程序(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程 项目运行 环境配置: Pychram社区版+ pyth ...

  8. 运营版uniapp多商户商城小程序+H5+APP+商家入驻短视频社区种草直播阶梯拼团

    运营版uniapp多商户商城小程序+H5+APP+商家入驻短视频社区种草直播阶梯拼团 前后端全套源码, 支持二次开发,代码无加密! 独立商家后台 用于店铺商品管理订单管理发货管理等 多类经营模式 多商 ...

  9. 计算机毕业设计Python+uniapp学生课堂考勤小程序(小程序+源码+LW)

    计算机毕业设计Python+uniapp学生课堂考勤小程序(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程 项目运行 环境配置: Pychram社区版+ pyth ...

  10. uniapp小程序运行正常,app运行报cid unmatched at view.umd.min.js

    uniapp小程序运行正常,app运行报cid unmatched at view.umd.min.js 阐述 uniapp 运行小程序正常,但是调试App.有时候就会报一大堆错误,是因为小程序编辑器 ...

最新文章

  1. linux系统下的grep命令功能与正则表达式详解
  2. Javascript中的时间小议
  3. 利用Hexo搭建个人博客-博客初始化篇
  4. sqoop增量导入hdfs和导出
  5. 软件测试度量计算方法有哪些,软件测试度量(三)
  6. MVC应用程序显示RealPlayer(rm)视频
  7. python 数组 元组 列表_python_Day_02[数组、列表、元组之篇]
  8. 探讨一下常见支付系统的对外接口
  9. AtomicInteger简介
  10. 【java】JApplet类相关方法的使用
  11. [导入]2007年美国电影上映时间表
  12. wps linux 哪个版本好用吗,WPS Linux版与国产统一操作系统UOS完成适配:体验追上Wintel...
  13. EFCore 调试远程SqlServer数据库提示信号灯超时时间已到
  14. 硬币组合问题python_Python,求钱币组合情况,用一分两分和五分的硬币攒的钱一元钱,的所有情况...
  15. Unity ASE点光源不显示的问题
  16. 根据ISBN查询图书信息
  17. python大纲图_干货!!python自学大纲!
  18. LVGL+NES|基于lvgl实现nes模拟器(lv_100ask_nes)
  19. 数字功放和模拟功放差异介绍
  20. resultFul架构

热门文章

  1. moco框架的简单搭建
  2. 通过局域网访问tomcat服务器
  3. 惠普HP Color LaserJet Pro M283fdw 一体机驱动
  4. 显示硬件发展与视频开发系列(6)----显示标注与视频处理单元(3):APU
  5. 【2012.03.3普及组】打牌
  6. 自定义上传图片拼图游戏
  7. centos系统中ping时出现Destination Host Prohibited
  8. bootstrap使用之stickUp(固定导航栏)
  9. swt最小化到系統托盤的實現
  10. Mathjax与LaTex公式简介