使用【miniprogram-to-uniapp】可以将微信小程序项目转为 uni-app 项目(新版本 HBuilderX 工具已经支持各种小程序转换插件)
HBuilderX 插件地址:miniprogram-to-uniapp v2 - DCloud 插件市场
核心原理:使用 Babel 获取AST(词法分析),然后或使用 Babel 自带函数增删,或正则分析替换等等操作
支持的事件
1、支持微信、QQ、头条/抖音、支付宝/钉钉和百度等小程序转换到 uni-app 项目
2、支持有/无云开发的小程序项目转换为 uni-app 项目(cloudfunctions 目录将被忽略,uni-app 结合小程序云开发见:使用 uni-app 进行微信小程序云开发经验分享)
3、支持解析 TypeScript 小程序项目
4、支持解析使用 npm 模块的小程序项目
5、支持解析 include 标签
6、支持解析 template 标签
7、支持解析 Behavior 文件为 mixins 文件
8、支持 .js', .wxml 和 *.wxss 文件进行相应转换,并做了大量的优化
9、支持识别 App、Page、Component、VantComponent、Behavior 和纯 Javascript 文件的转换
10、修复变量名与函数重名的情况
11、合并使用 require 导入的 wxs 文件
12、setData() polyfill
13、搜索未在 data 声明,而直接在 setData() 里使用的变量,并修复
14、使用 jyf-parser 替换 wxParse(感谢网友 “爱瑞巴勒康忙北鼻” 的建议)
15、因 uni-app 会将所有非 static 目录的资源文件删除,因此将所有资源文件移入 static 目录,并修复所有能修复到的路径(目前 uni 编译时会将非 static 目录的文件复制一份到 static 目录,但并不完全,因此本功能仍保留)
不支持的转换
1、不支持转换反编译后的小程序项目
2、不支持转换使用 uni-app 编译的小程序项目
3、不支持转换使用 redux 开发的小程序(代表为:网易云信小程序 DEMO)
4、不支持转换使用 wxpage 开发的小程序(https://github.com/tvfe/wxpage)
5、不支持转换使用腾讯 omi 开发的小程序(https://github.com/Tencent/omi)
6、不支持转换小程序抽象节点 componentGenerics
7、不支持 component 里的 pageLifetimes 生命周期,请手动绕过
8、不支持使用 js 系统关键字作为函数或变量名(如 default、import、return、switch 等)
9、不支持以 \$ 开头的变量名称,如 Page({data:{$data:{name:"hello"}}}) ,刚好 \$data 是 vue 内置变量,so 不支持,需手动修复
10、不支持以动态绑定的函数 <input @input="test{{index+1}}">,需手动修复
11、更多,请参照 miniprogram to uniapp 工具答疑
使用方法
第一步
win + R 在命令行里,运行【 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 后面要使用双引号("")不能使用单引号('')
wtu -i ""
如:【wtu -i "D:\Desktop\wxmini_demo\mini"】,回车后即可以在源项目同及目录得到一个后缀为_uni的目录,即转换成功
工具升级命令
因为工具更新比较频繁,安装后,可以使用如下命令进行升级
npm update miniprogram-to-uniapp -g
工具源码
仓库地址:https://github.com/zhangdaren/miniprogram-to-uniapp文章来源:https://www.toymoban.com/news/detail-763446.html
参考于:miniprogram-to-uniapp使用指南(各种小程序项目转换为uni-app项目)文章来源地址https://www.toymoban.com/news/detail-763446.html
到了这里,关于如何将各种小程序(微信小程序)项目转换为 uni-app 项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!