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

news/2024/7/20 2:17:58 标签: 小程序, uni-app, 微信小程序

小程序分类:uni-app
qq小程序 支付宝小程序 百度小程序 钉钉小程序 微信小程序 小程序转成uni_app 小程序转为uni_app 小程序转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 install miniprogram-to-uniapp -g 

如果运行npm报错,请先安装Node.js,下载地址:https://nodejs.org/zh-cn/

第二步

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

 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的目录,即转换成功。

wtu -i "E:\zpWork\Project_self\miniprogram-to-uniapp\test\test-wx-to-uni"

转换前:
在这里插入图片描述

转换后:
在这里插入图片描述

转换后的项目文件对比(左边是小程序项目,右边是Uni-app项目目录):
在这里插入图片描述

第四步

将转换后的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 工具答疑 进行修改,保证无报错,然后再运行到其他平台。

转换工具下载地址:
https://download.csdn.net/download/weixin_43025151/87642314


http://www.niftyadmin.cn/n/193023.html

相关文章

java基础知识——21.内部类

这篇文章&#xff0c;我们来介绍一下java的内部类知识 目录 1.内部类介绍 1.1内部类的应用场景 1.2 小结 2.成员内部类 2.1 成员内部类的书写 2.2 创建成员内部类的对象 2.3 成员内部类获取外部类的成员变量 3.静态内部类 4.局部内部类 5.匿名内部类 6.总结 1.内部…

一个开源人的心酸哭诉

编者按&#xff1a;这篇文章比较长&#xff0c;但值得一读。从这篇文章&#xff0c;你可以看到一些开源开发者的内心活动&#xff0c;看看他们的热情、抱负、无奈、心酸、愤怒、失望和痛斥&#xff1b;看看他们如何指责、讽刺、乞求、羞辱那些使用他们作品而无视他们痛苦的人&a…

【视频分割】【深度学习】MiVOS官方Pytorch代码-S2M模块DeepLavV3Plus网络解析

【视频分割】【深度学习】MiVOS官方Pytorch代码-S2M模块DeepLavV3Plus网络解析 MiVOS模型将交互到掩码和掩码传播分离&#xff0c;从而实现更高的泛化性和更好的性能。单独训练的交互模块将用户交互转换为对象掩码&#xff0c;本博客将讲解S2M(用户交互产生分割图)模块的深度网…

Android中级——系统信息与安全机制

系统信息与安全机制系统信息获取/system/build.prop/procandroid.os.buildSystemPropertyPackageManagerActivityManagerpackages.xmlpermissions标签package标签perms标签安全机制Apk反编译apktooldex2jarjd-guiApk加密系统信息获取 /system/build.prop 存放一些配置信息&am…

Python 自动化指南(繁琐工作自动化)第二版:十、组织文件

原文&#xff1a;https://automatetheboringstuff.com/2e/chapter10/ 在前一章中&#xff0c;你学习了如何在 Python 中创建和写入新文件。您的程序也可以组织硬盘上预先存在的文件。也许你有过这样的经历&#xff1a;浏览一个装满几十个、几百个、甚至几千个文件的文件夹&…

Linux中的算法分离手段

0. 简介 参数分离对于绝大多数算法开发来说收益是非常大的&#xff0c;因为我们都知道&#xff0c;随着平台的更替&#xff0c;很多时候如果说数据流和算法交叠在一起&#xff08;即接口与实现合在一起&#xff09;。这将有可能会导致在迁移平台时候会导致代码难以维护&#x…

【华为OD机试真题】猜字谜(javapython)

猜字谜 时间限制:1s空间限制:256MB 限定浯言:不限 题目描述: 小王设计了一个简单的猜字谜游戏,游戏的谜面是一个错误的单词,比如nesw,玩 家需要猜出谜底库中正确的单词。猜中的要求如下: 对于某个谜面和谜底单词,满足下面任一条件都表示猜中: 变换顺序以后一样的,…

ShuffleNet V1 对花数据集训练

目录 1. shufflenet 介绍 分组卷积 通道重排 2. ShuffleNet V1 网络 2.1 shufflenet 的结构 2.2 代码解释 2.3 shufflenet 代码 3. train 训练 4. Net performance on flower datasets 1. shufflenet 介绍 shufflenet的亮点&#xff1a;分组卷积 通道重排 mobilenet …